From 0799636c78c2361f7e95aa11e012473e18274e4e Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Sat, 28 Feb 2026 23:16:10 -0700
Subject: [PATCH] Right rail template

---
 app/(dev)/components-preview/page.tsx         | 388 +++++++++++-------
 .../WebVitalsDashboard.container.tsx          |  18 +-
 app/components/asset/Icon.tsx                 |  48 +++
 app/components/asset/icon/exclamation.svg     |   3 +
 app/components/asset/index.ts                 |   2 +
 app/components/cards/Card/Card.view.tsx       |   4 +-
 .../controls/SelectInput/SelectInput.view.tsx |  19 +-
 .../controls/TextArea/TextArea.view.tsx       |   1 +
 .../controls/TextInput/TextInput.view.tsx     |   1 +
 app/components/icons/Avatar.tsx               |   5 +-
 app/components/navigation/Footer.tsx          |   2 +
 .../navigation/TopNav/TopNav.container.tsx    |  27 +-
 .../navigation/TopNav/TopNav.view.tsx         |   3 +
 .../sections/HeroBanner/HeroBanner.tsx        |   1 +
 .../sections/RuleStack/RuleStack.view.tsx     |  35 +-
 app/components/sections/SectionNumber.tsx     |   1 +
 .../type/ContentLockup/ContentLockup.view.tsx |  15 +-
 .../utility/CardStack/CardStack.container.tsx |   2 +
 .../utility/CardStack/CardStack.types.ts      |   3 +
 .../utility/CardStack/CardStack.view.tsx      |  50 ++-
 .../CreateFlowTopNav.view.tsx                 |   2 +-
 .../DecisionMakingSidebar.container.tsx       |  44 ++
 .../DecisionMakingSidebar.types.ts            |  31 ++
 .../DecisionMakingSidebar.view.tsx            |  78 ++++
 .../utility/DecisionMakingSidebar/index.tsx   |   2 +
 .../InfoMessageBox.container.tsx              |  56 +++
 .../InfoMessageBox/InfoMessageBox.types.ts    |  29 ++
 .../InfoMessageBox/InfoMessageBox.view.tsx    |  77 ++++
 .../utility/InfoMessageBox/index.tsx          |   2 +
 .../utility/InputLabel/InputLabel.view.tsx    |   1 +
 .../utility/ModalHeader/ModalHeader.view.tsx  |   1 +
 app/components/utility/Tag/Tag.view.tsx       |  10 +-
 app/contexts/MessagesContext.tsx              |   4 +-
 app/create/cards/page.tsx                     |  25 +-
 app/create/right-rail/page.tsx                | 185 +++++++++
 app/create/types.ts                           |   4 +-
 app/create/upload/page.tsx                    |   5 +-
 app/hooks/useMediaQuery.ts                    |   3 +-
 lib/i18n/getTranslation.ts                    |   8 +-
 tests/components/ContentBanner.test.tsx       |  10 +-
 tests/components/CreateFlowFooter.test.tsx    |   4 +-
 tests/components/CreateFlowTopNav.test.tsx    |   4 +-
 tests/components/HeaderLockup.test.tsx        |  12 +-
 tests/components/Logo.test.tsx                |   2 +-
 tests/components/MultiSelect.test.tsx         |  18 +-
 tests/components/RelatedArticles.test.tsx     |  10 +-
 tests/components/ReviewPage.test.tsx          |   8 +-
 tests/components/TextInput.test.tsx           |   6 +-
 tests/components/Upload.test.tsx              |  28 +-
 tests/e2e/performance.spec.ts                 |   6 +-
 tests/e2e/visual-regression.spec.ts           |   4 +-
 tests/pages/cards.test.jsx                    |   8 +-
 tests/pages/right-rail.test.jsx               | 145 +++++++
 tests/pages/user-journey.test.jsx             |   8 +-
 tests/unit/Card.test.jsx                      |  10 +-
 tests/unit/CardStack.test.jsx                 |  29 +-
 tests/unit/NumberCard.test.jsx                |  15 +-
 tests/unit/RuleCard.test.jsx                  |  17 +-
 tests/unit/RuleStack.test.jsx                 |   8 +-
 vitest.setup.ts                               |  13 +-
 60 files changed, 1255 insertions(+), 305 deletions(-)
 create mode 100644 app/components/asset/Icon.tsx
 create mode 100644 app/components/asset/icon/exclamation.svg
 create mode 100644 app/components/asset/index.ts
 create mode 100644 app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx
 create mode 100644 app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.types.ts
 create mode 100644 app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.view.tsx
 create mode 100644 app/components/utility/DecisionMakingSidebar/index.tsx
 create mode 100644 app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx
 create mode 100644 app/components/utility/InfoMessageBox/InfoMessageBox.types.ts
 create mode 100644 app/components/utility/InfoMessageBox/InfoMessageBox.view.tsx
 create mode 100644 app/components/utility/InfoMessageBox/index.tsx
 create mode 100644 app/create/right-rail/page.tsx
 create mode 100644 tests/pages/right-rail.test.jsx

diff --git a/app/(dev)/components-preview/page.tsx b/app/(dev)/components-preview/page.tsx
index acdacd8..f448360 100644
--- a/app/(dev)/components-preview/page.tsx
+++ b/app/(dev)/components-preview/page.tsx
@@ -8,6 +8,9 @@ import MultiSelect from "../../components/controls/MultiSelect";
 import Image from "next/image";
 import { getAssetPath } from "../../../lib/assetUtils";
 
+/** Module-level counter for unique rule card chip IDs (avoids ref in initial state). */
+let ruleCardIdCounter = 0;
+
 interface ChipData {
   id: string;
   label: string;
@@ -18,7 +21,13 @@ interface ChipData {
 
 // MultiSelect example component with state management
 function MultiSelectExample({ size }: { size: "S" | "M" }) {
-  const [options, setOptions] = useState<Array<{ id: string; label: string; state: "Unselected" | "Selected" | "Custom" }>>([
+  const [options, setOptions] = useState<
+    Array<{
+      id: string;
+      label: string;
+      state: "Unselected" | "Selected" | "Custom";
+    }>
+  >([
     { id: "1", label: "1 member", state: "Unselected" },
     { id: "2", label: "2-10 members", state: "Unselected" },
     { id: "3", label: "10-24 members", state: "Unselected" },
@@ -36,17 +45,14 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
               ...opt,
               state: opt.state === "Selected" ? "Unselected" : "Selected",
             }
-          : opt
-      )
+          : opt,
+      ),
     );
   };
 
   const handleAddClick = () => {
     const newId = `custom-${Date.now()}`;
-    setOptions((prev) => [
-      ...prev,
-      { id: newId, label: "", state: "Custom" },
-    ]);
+    setOptions((prev) => [...prev, { id: newId, label: "", state: "Custom" }]);
   };
 
   const handleCustomConfirm = (chipId: string, value: string) => {
@@ -54,8 +60,8 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
       prev.map((opt) =>
         opt.id === chipId
           ? { ...opt, label: value, state: "Selected" as const }
-          : opt
-      )
+          : opt,
+      ),
     );
   };
 
@@ -84,28 +90,52 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
 }
 
 export default function ComponentsPreview() {
-  const [chipStates, setChipStates] = useState<Record<string, "Unselected" | "Selected">>({
+  const [chipStates, setChipStates] = useState<
+    Record<string, "Unselected" | "Selected">
+  >({
     "default-s": "Unselected",
     "default-m": "Unselected",
     "inverse-s": "Unselected",
     "inverse-m": "Unselected",
   });
-  
+
   // Manage custom chips separately
   const [customChips, setCustomChips] = useState<ChipData[]>([
-    { id: "custom-1", label: "", state: "Custom", palette: "Default", size: "S" },
-    { id: "custom-2", label: "", state: "Custom", palette: "Default", size: "M" },
+    {
+      id: "custom-1",
+      label: "",
+      state: "Custom",
+      palette: "Default",
+      size: "S",
+    },
+    {
+      id: "custom-2",
+      label: "",
+      state: "Custom",
+      palette: "Default",
+      size: "M",
+    },
   ]);
 
   // RuleCard categories with chip options and state management
-  const [ruleCardCategories, setRuleCardCategories] = useState<Array<{
-    name: string;
-    chipOptions: Array<{ id: string; label: string; state: "Unselected" | "Selected" | "Custom" }>;
-    onChipClick?: (categoryName: string, chipId: string) => void;
-    onAddClick?: (categoryName: string) => void;
-    onCustomChipConfirm?: (categoryName: string, chipId: string, value: string) => void;
-    onCustomChipClose?: (categoryName: string, chipId: string) => void;
-  }>>([
+  const [ruleCardCategories, setRuleCardCategories] = useState<
+    Array<{
+      name: string;
+      chipOptions: Array<{
+        id: string;
+        label: string;
+        state: "Unselected" | "Selected" | "Custom";
+      }>;
+      onChipClick?: (_categoryName: string, _chipId: string) => void;
+      onAddClick?: (_categoryName: string) => void;
+      onCustomChipConfirm?: (
+        _categoryName: string,
+        _chipId: string,
+        _value: string,
+      ) => void;
+      onCustomChipClose?: (_categoryName: string, _chipId: string) => void;
+    }>
+  >([
     {
       name: "Values",
       chipOptions: [
@@ -125,17 +155,20 @@ export default function ComponentsPreview() {
                     opt.id === chipId
                       ? {
                           ...opt,
-                          state: opt.state === "Selected" ? "Unselected" : "Selected",
+                          state:
+                            opt.state === "Selected"
+                              ? "Unselected"
+                              : "Selected",
                         }
-                      : opt
+                      : opt,
                   ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
       onAddClick: (categoryName: string) => {
-        const newId = `custom-${categoryName}-${Date.now()}`;
+        const newId = `custom-${categoryName}-${++ruleCardIdCounter}`;
         setRuleCardCategories((prev) =>
           prev.map((cat) =>
             cat.name === categoryName
@@ -146,11 +179,15 @@ export default function ComponentsPreview() {
                     { id: newId, label: "", state: "Custom" },
                   ],
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
-      onCustomChipConfirm: (categoryName: string, chipId: string, value: string) => {
+      onCustomChipConfirm: (
+        categoryName: string,
+        chipId: string,
+        value: string,
+      ) => {
         setRuleCardCategories((prev) =>
           prev.map((cat) =>
             cat.name === categoryName
@@ -159,11 +196,11 @@ export default function ComponentsPreview() {
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
                       ? { ...opt, label: value, state: "Selected" }
-                      : opt
+                      : opt,
                   ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
       onCustomChipClose: (categoryName: string, chipId: string) => {
@@ -172,18 +209,18 @@ export default function ComponentsPreview() {
             cat.name === categoryName
               ? {
                   ...cat,
-                  chipOptions: cat.chipOptions.filter((opt) => opt.id !== chipId),
+                  chipOptions: cat.chipOptions.filter(
+                    (opt) => opt.id !== chipId,
+                  ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
     },
     {
       name: "Communication",
-      chipOptions: [
-        { id: "comm-1", label: "Signal", state: "Unselected" },
-      ],
+      chipOptions: [{ id: "comm-1", label: "Signal", state: "Unselected" }],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
           prev.map((cat) =>
@@ -194,17 +231,20 @@ export default function ComponentsPreview() {
                     opt.id === chipId
                       ? {
                           ...opt,
-                          state: opt.state === "Selected" ? "Unselected" : "Selected",
+                          state:
+                            opt.state === "Selected"
+                              ? "Unselected"
+                              : "Selected",
                         }
-                      : opt
+                      : opt,
                   ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
       onAddClick: (categoryName: string) => {
-        const newId = `custom-${categoryName}-${Date.now()}`;
+        const newId = `custom-${categoryName}-${++ruleCardIdCounter}`;
         setRuleCardCategories((prev) =>
           prev.map((cat) =>
             cat.name === categoryName
@@ -215,11 +255,15 @@ export default function ComponentsPreview() {
                     { id: newId, label: "", state: "Custom" },
                   ],
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
-      onCustomChipConfirm: (categoryName: string, chipId: string, value: string) => {
+      onCustomChipConfirm: (
+        categoryName: string,
+        chipId: string,
+        value: string,
+      ) => {
         setRuleCardCategories((prev) =>
           prev.map((cat) =>
             cat.name === categoryName
@@ -228,11 +272,11 @@ export default function ComponentsPreview() {
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
                       ? { ...opt, label: value, state: "Selected" }
-                      : opt
+                      : opt,
                   ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
       onCustomChipClose: (categoryName: string, chipId: string) => {
@@ -241,10 +285,12 @@ export default function ComponentsPreview() {
             cat.name === categoryName
               ? {
                   ...cat,
-                  chipOptions: cat.chipOptions.filter((opt) => opt.id !== chipId),
+                  chipOptions: cat.chipOptions.filter(
+                    (opt) => opt.id !== chipId,
+                  ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
     },
@@ -263,17 +309,20 @@ export default function ComponentsPreview() {
                     opt.id === chipId
                       ? {
                           ...opt,
-                          state: opt.state === "Selected" ? "Unselected" : "Selected",
+                          state:
+                            opt.state === "Selected"
+                              ? "Unselected"
+                              : "Selected",
                         }
-                      : opt
+                      : opt,
                   ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
       onAddClick: (categoryName: string) => {
-        const newId = `custom-${categoryName}-${Date.now()}`;
+        const newId = `custom-${categoryName}-${++ruleCardIdCounter}`;
         setRuleCardCategories((prev) =>
           prev.map((cat) =>
             cat.name === categoryName
@@ -284,11 +333,15 @@ export default function ComponentsPreview() {
                     { id: newId, label: "", state: "Custom" },
                   ],
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
-      onCustomChipConfirm: (categoryName: string, chipId: string, value: string) => {
+      onCustomChipConfirm: (
+        categoryName: string,
+        chipId: string,
+        value: string,
+      ) => {
         setRuleCardCategories((prev) =>
           prev.map((cat) =>
             cat.name === categoryName
@@ -297,11 +350,11 @@ export default function ComponentsPreview() {
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
                       ? { ...opt, label: value, state: "Selected" }
-                      : opt
+                      : opt,
                   ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
       onCustomChipClose: (categoryName: string, chipId: string) => {
@@ -310,10 +363,12 @@ export default function ComponentsPreview() {
             cat.name === categoryName
               ? {
                   ...cat,
-                  chipOptions: cat.chipOptions.filter((opt) => opt.id !== chipId),
+                  chipOptions: cat.chipOptions.filter(
+                    (opt) => opt.id !== chipId,
+                  ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
     },
@@ -333,17 +388,20 @@ export default function ComponentsPreview() {
                     opt.id === chipId
                       ? {
                           ...opt,
-                          state: opt.state === "Selected" ? "Unselected" : "Selected",
+                          state:
+                            opt.state === "Selected"
+                              ? "Unselected"
+                              : "Selected",
                         }
-                      : opt
+                      : opt,
                   ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
       onAddClick: (categoryName: string) => {
-        const newId = `custom-${categoryName}-${Date.now()}`;
+        const newId = `custom-${categoryName}-${++ruleCardIdCounter}`;
         setRuleCardCategories((prev) =>
           prev.map((cat) =>
             cat.name === categoryName
@@ -354,11 +412,15 @@ export default function ComponentsPreview() {
                     { id: newId, label: "", state: "Custom" },
                   ],
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
-      onCustomChipConfirm: (categoryName: string, chipId: string, value: string) => {
+      onCustomChipConfirm: (
+        categoryName: string,
+        chipId: string,
+        value: string,
+      ) => {
         setRuleCardCategories((prev) =>
           prev.map((cat) =>
             cat.name === categoryName
@@ -367,11 +429,11 @@ export default function ComponentsPreview() {
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
                       ? { ...opt, label: value, state: "Selected" }
-                      : opt
+                      : opt,
                   ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
       onCustomChipClose: (categoryName: string, chipId: string) => {
@@ -380,10 +442,12 @@ export default function ComponentsPreview() {
             cat.name === categoryName
               ? {
                   ...cat,
-                  chipOptions: cat.chipOptions.filter((opt) => opt.id !== chipId),
+                  chipOptions: cat.chipOptions.filter(
+                    (opt) => opt.id !== chipId,
+                  ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
     },
@@ -403,17 +467,20 @@ export default function ComponentsPreview() {
                     opt.id === chipId
                       ? {
                           ...opt,
-                          state: opt.state === "Selected" ? "Unselected" : "Selected",
+                          state:
+                            opt.state === "Selected"
+                              ? "Unselected"
+                              : "Selected",
                         }
-                      : opt
+                      : opt,
                   ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
       onAddClick: (categoryName: string) => {
-        const newId = `custom-${categoryName}-${Date.now()}`;
+        const newId = `custom-${categoryName}-${++ruleCardIdCounter}`;
         setRuleCardCategories((prev) =>
           prev.map((cat) =>
             cat.name === categoryName
@@ -424,11 +491,15 @@ export default function ComponentsPreview() {
                     { id: newId, label: "", state: "Custom" },
                   ],
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
-      onCustomChipConfirm: (categoryName: string, chipId: string, value: string) => {
+      onCustomChipConfirm: (
+        categoryName: string,
+        chipId: string,
+        value: string,
+      ) => {
         setRuleCardCategories((prev) =>
           prev.map((cat) =>
             cat.name === categoryName
@@ -437,11 +508,11 @@ export default function ComponentsPreview() {
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
                       ? { ...opt, label: value, state: "Selected" }
-                      : opt
+                      : opt,
                   ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
       onCustomChipClose: (categoryName: string, chipId: string) => {
@@ -450,10 +521,12 @@ export default function ComponentsPreview() {
             cat.name === categoryName
               ? {
                   ...cat,
-                  chipOptions: cat.chipOptions.filter((opt) => opt.id !== chipId),
+                  chipOptions: cat.chipOptions.filter(
+                    (opt) => opt.id !== chipId,
+                  ),
                 }
-              : cat
-          )
+              : cat,
+          ),
         );
       },
     },
@@ -467,7 +540,8 @@ export default function ComponentsPreview() {
             Component Preview
           </h1>
           <p className="font-inter text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]">
-            RuleCard, Card, and Chip component examples - states, palettes, sizes, and interactions
+            RuleCard, Card, and Chip component examples - states, palettes,
+            sizes, and interactions
           </p>
         </header>
 
@@ -481,7 +555,7 @@ export default function ComponentsPreview() {
             <div className="space-y-[var(--spacing-scale-016)]">
               <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
                 Default palette
-                </h3>
+              </h3>
               <div className="flex flex-wrap items-center gap-[var(--spacing-scale-016)]">
                 <Chip
                   label="Small"
@@ -491,7 +565,10 @@ export default function ComponentsPreview() {
                   onClick={() =>
                     setChipStates((prev) => ({
                       ...prev,
-                      "default-s": prev["default-s"] === "Selected" ? "Unselected" : "Selected",
+                      "default-s":
+                        prev["default-s"] === "Selected"
+                          ? "Unselected"
+                          : "Selected",
                     }))
                   }
                 />
@@ -503,7 +580,10 @@ export default function ComponentsPreview() {
                   onClick={() =>
                     setChipStates((prev) => ({
                       ...prev,
-                      "default-m": prev["default-m"] === "Selected" ? "Unselected" : "Selected",
+                      "default-m":
+                        prev["default-m"] === "Selected"
+                          ? "Unselected"
+                          : "Selected",
                     }))
                   }
                 />
@@ -528,27 +608,35 @@ export default function ComponentsPreview() {
                           prev.map((c) =>
                             c.id === chip.id
                               ? { ...c, label: value, state: "Selected" }
-                              : c
-                          )
+                              : c,
+                          ),
                         );
                       }}
                       onClose={(e) => {
                         e.stopPropagation();
-                        setCustomChips((prev) => prev.filter((c) => c.id !== chip.id));
+                        setCustomChips((prev) =>
+                          prev.filter((c) => c.id !== chip.id),
+                        );
                       }}
                       onClick={(e) => {
                         e.stopPropagation();
                         // Only toggle if the chip is in Selected or Unselected state (not Custom)
-                        if (chip.state === "Selected" || chip.state === "Unselected") {
+                        if (
+                          chip.state === "Selected" ||
+                          chip.state === "Unselected"
+                        ) {
                           setCustomChips((prev) =>
                             prev.map((c) =>
                               c.id === chip.id
                                 ? {
                                     ...c,
-                                    state: c.state === "Selected" ? "Unselected" : "Selected",
+                                    state:
+                                      c.state === "Selected"
+                                        ? "Unselected"
+                                        : "Selected",
                                   }
-                                : c
-                            )
+                                : c,
+                            ),
                           );
                         }
                       }}
@@ -561,7 +649,13 @@ export default function ComponentsPreview() {
                     const newId = `custom-${Date.now()}`;
                     setCustomChips((prev) => [
                       ...prev,
-                      { id: newId, label: "", state: "Custom", palette: "Default", size: "S" },
+                      {
+                        id: newId,
+                        label: "",
+                        state: "Custom",
+                        palette: "Default",
+                        size: "S",
+                      },
                     ]);
                   }}
                   className="flex gap-[var(--measures-spacing-050,2px)] items-center justify-center p-[var(--measures-spacing-200,8px)] rounded-[var(--measures-radius-full,9999px)] shrink-0 hover:opacity-80 transition-opacity"
@@ -592,11 +686,14 @@ export default function ComponentsPreview() {
             </div>
 
             {/* Inverse palette - on white background */}
-                <div className="space-y-[var(--spacing-scale-016)]">
+            <div className="space-y-[var(--spacing-scale-016)]">
               <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
                 Inverse palette (on white background)
               </h3>
-              <div className="!bg-white p-[var(--spacing-scale-032)] rounded-[var(--radius-300,12px)]" style={{ backgroundColor: '#ffffff' }}>
+              <div
+                className="!bg-white p-[var(--spacing-scale-032)] rounded-[var(--radius-300,12px)]"
+                style={{ backgroundColor: "#ffffff" }}
+              >
                 <div className="flex flex-wrap items-center gap-[var(--spacing-scale-016)]">
                   <Chip
                     label="Small"
@@ -606,7 +703,10 @@ export default function ComponentsPreview() {
                     onClick={() =>
                       setChipStates((prev) => ({
                         ...prev,
-                        "inverse-s": prev["inverse-s"] === "Selected" ? "Unselected" : "Selected",
+                        "inverse-s":
+                          prev["inverse-s"] === "Selected"
+                            ? "Unselected"
+                            : "Selected",
                       }))
                     }
                   />
@@ -618,7 +718,10 @@ export default function ComponentsPreview() {
                     onClick={() =>
                       setChipStates((prev) => ({
                         ...prev,
-                        "inverse-m": prev["inverse-m"] === "Selected" ? "Unselected" : "Selected",
+                        "inverse-m":
+                          prev["inverse-m"] === "Selected"
+                            ? "Unselected"
+                            : "Selected",
                       }))
                     }
                   />
@@ -641,7 +744,8 @@ export default function ComponentsPreview() {
           </h2>
           <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
             <p className="font-inter text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]">
-              Horizontal and vertical orientations with recommended and selected states.
+              Horizontal and vertical orientations with recommended and selected
+              states.
             </p>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl">
               <div className="space-y-2">
@@ -654,7 +758,7 @@ export default function ComponentsPreview() {
                   recommended={true}
                   selected={false}
                   orientation="horizontal"
-                  onClick={() => console.log("Card clicked")}
+                  onClick={() => console.warn("Card clicked")}
                 />
               </div>
               <div className="space-y-2">
@@ -667,7 +771,7 @@ export default function ComponentsPreview() {
                   recommended={false}
                   selected={true}
                   orientation="horizontal"
-                  onClick={() => console.log("Card clicked")}
+                  onClick={() => console.warn("Card clicked")}
                 />
               </div>
               <div className="space-y-2">
@@ -681,7 +785,7 @@ export default function ComponentsPreview() {
                   selected={false}
                   orientation="vertical"
                   showInfoIcon={true}
-                  onClick={() => console.log("Card clicked")}
+                  onClick={() => console.warn("Card clicked")}
                 />
               </div>
               <div className="space-y-2">
@@ -695,7 +799,7 @@ export default function ComponentsPreview() {
                   selected={true}
                   orientation="vertical"
                   showInfoIcon={true}
-                  onClick={() => console.log("Card clicked")}
+                  onClick={() => console.warn("Card clicked")}
                 />
               </div>
             </div>
@@ -717,9 +821,9 @@ export default function ComponentsPreview() {
               className="w-[525px]"
               logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
               logoAlt="Mutual Aid Mondays"
-              onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
-                  />
-                </div>
+              onClick={() => console.warn("Card clicked: Mutual Aid Mondays")}
+            />
+          </div>
         </section>
 
         {/* Collapsed State - Medium */}
@@ -737,17 +841,17 @@ export default function ComponentsPreview() {
               className="w-[289px]"
               logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
               logoAlt="Mutual Aid Mondays"
-              onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
-                  />
+              onClick={() => console.warn("Card clicked: Mutual Aid Mondays")}
+            />
           </div>
         </section>
 
         {/* Expanded State - Large */}
-            <section className="space-y-[var(--spacing-scale-024)]">
-              <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
+        <section className="space-y-[var(--spacing-scale-024)]">
+          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
             Expanded State - Large (L)
-              </h2>
-              <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
+          </h2>
+          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
             <RuleCard
               title="Mutual Aid Mondays"
               description="Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness."
@@ -758,9 +862,9 @@ export default function ComponentsPreview() {
               logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
               logoAlt="Mutual Aid Mondays"
               categories={ruleCardCategories}
-              onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
-                      />
-                    </div>
+              onClick={() => console.warn("Card clicked: Mutual Aid Mondays")}
+            />
+          </div>
         </section>
 
         {/* Expanded State - Medium */}
@@ -779,16 +883,16 @@ export default function ComponentsPreview() {
               logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
               logoAlt="Mutual Aid Mondays"
               categories={ruleCardCategories}
-              onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
+              onClick={() => console.warn("Card clicked: Mutual Aid Mondays")}
             />
-              </div>
-            </section>
+          </div>
+        </section>
 
         {/* Different Background Colors */}
-            <section className="space-y-[var(--spacing-scale-024)]">
-              <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
+        <section className="space-y-[var(--spacing-scale-024)]">
+          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
             Different Background Colors
-              </h2>
+          </h2>
           <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-scale-024)]">
               <RuleCard
@@ -806,7 +910,7 @@ export default function ComponentsPreview() {
                     height={103}
                   />
                 }
-                onClick={() => console.log("Consensus clusters selected")}
+                onClick={() => console.warn("Consensus clusters selected")}
               />
               <RuleCard
                 title="Consensus"
@@ -823,10 +927,10 @@ export default function ComponentsPreview() {
                     height={103}
                   />
                 }
-                onClick={() => console.log("Consensus selected")}
-                  />
-                </div>
-              </div>
+                onClick={() => console.warn("Consensus selected")}
+              />
+            </div>
+          </div>
         </section>
 
         {/* Logo Fallback */}
@@ -843,9 +947,9 @@ export default function ComponentsPreview() {
               size="L"
               className="w-[525px]"
               communityInitials="CE"
-              onClick={() => console.log("Community Example selected")}
-                  />
-                </div>
+              onClick={() => console.warn("Community Example selected")}
+            />
+          </div>
         </section>
 
         {/* MultiSelect Component */}
@@ -856,7 +960,7 @@ export default function ComponentsPreview() {
           <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
             {/* Small size */}
             <MultiSelectExample size="S" />
-            
+
             {/* Medium size */}
             <MultiSelectExample size="M" />
           </div>
diff --git a/app/components/WebVitalsDashboard/WebVitalsDashboard.container.tsx b/app/components/WebVitalsDashboard/WebVitalsDashboard.container.tsx
index 0b9ea0c..dafa943 100644
--- a/app/components/WebVitalsDashboard/WebVitalsDashboard.container.tsx
+++ b/app/components/WebVitalsDashboard/WebVitalsDashboard.container.tsx
@@ -40,7 +40,23 @@ const WebVitalsDashboardContainer = memo(() => {
 
     if (typeof window !== "undefined") {
       import("web-vitals").then((webVitals) => {
-        const { getCLS, getFID, getFCP, getLCP, getTTFB } = webVitals as any;
+        const { getCLS, getFID, getFCP, getLCP, getTTFB } = webVitals as {
+          getCLS: (
+            _fn: (_m: { value: number; rating: string }) => void,
+          ) => void;
+          getFID: (
+            _fn: (_m: { value: number; rating: string }) => void,
+          ) => void;
+          getFCP: (
+            _fn: (_m: { value: number; rating: string }) => void,
+          ) => void;
+          getLCP: (
+            _fn: (_m: { value: number; rating: string }) => void,
+          ) => void;
+          getTTFB: (
+            _fn: (_m: { value: number; rating: string }) => void,
+          ) => void;
+        };
 
         getLCP((metric: { value: number; rating: VitalData["rating"] }) => {
           setVitals((prev) => ({
diff --git a/app/components/asset/Icon.tsx b/app/components/asset/Icon.tsx
new file mode 100644
index 0000000..105424b
--- /dev/null
+++ b/app/components/asset/Icon.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { memo } from "react";
+import ExclamationIcon from "./icon/exclamation.svg";
+
+export type IconName = "exclamation";
+
+/** SVG import may be a React component or a module object { default: Component } (e.g. with Turbopack) */
+const iconMap: Record<
+  IconName,
+  React.ComponentType<React.SVGProps<SVGSVGElement>> | { default: React.ComponentType<React.SVGProps<SVGSVGElement>> }
+> = {
+  exclamation: ExclamationIcon,
+};
+
+export interface IconProps {
+  name: IconName;
+  className?: string;
+  /** Width and height (default 24) */
+  size?: number;
+  "aria-hidden"?: boolean;
+}
+
+function IconComponent({
+  name,
+  className = "",
+  size = 24,
+  "aria-hidden": ariaHidden = true,
+}: IconProps) {
+  const SvgModule = iconMap[name];
+  if (!SvgModule) return null;
+  // Turbopack/bundler may expose SVG as { default: Component } instead of the component directly
+  const Svg =
+    typeof SvgModule === "object" && SvgModule !== null && "default" in SvgModule
+      ? (SvgModule as { default: React.ComponentType<React.SVGProps<SVGSVGElement>> }).default
+      : (SvgModule as React.ComponentType<React.SVGProps<SVGSVGElement>>);
+  if (typeof Svg !== "function") return null;
+  return (
+    <Svg
+      width={size}
+      height={size}
+      className={className}
+      aria-hidden={ariaHidden}
+    />
+  );
+}
+
+export default memo(IconComponent);
diff --git a/app/components/asset/icon/exclamation.svg b/app/components/asset/icon/exclamation.svg
new file mode 100644
index 0000000..ec01856
--- /dev/null
+++ b/app/components/asset/icon/exclamation.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.25 14.0386V5.53857H12.75V14.0386H11.25ZM11.25 18.4616V16.9616H12.75V18.4616H11.25Z" fill="currentColor"/>
+</svg>
diff --git a/app/components/asset/index.ts b/app/components/asset/index.ts
new file mode 100644
index 0000000..b97923c
--- /dev/null
+++ b/app/components/asset/index.ts
@@ -0,0 +1,2 @@
+export { default as Icon } from "./Icon";
+export type { IconName, IconProps } from "./Icon";
diff --git a/app/components/cards/Card/Card.view.tsx b/app/components/cards/Card/Card.view.tsx
index 3ddcf80..e9ba02d 100644
--- a/app/components/cards/Card/Card.view.tsx
+++ b/app/components/cards/Card/Card.view.tsx
@@ -42,7 +42,7 @@ export function CardView({
   const selectedBorder = selected
     ? "outline outline-2 outline-dashed outline-black outline-offset-[-2px]"
     : "";
-  const baseClasses = `rounded-[var(--radius-measures-radius-small)] bg-[#FFFFFF] p-4 transition-all duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
+  const baseClasses = `select-none rounded-[var(--radius-measures-radius-small)] bg-[#FFFFFF] p-4 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
 
   if (orientation === "horizontal") {
     return (
@@ -93,7 +93,7 @@ export function CardView({
           </p>
         ) : null}
       </div>
-      <div className="shrink-0">
+      <div className="shrink-0 w-[6rem]">
         <CardTag recommended={recommended} selected={selected} />
       </div>
     </div>
diff --git a/app/components/controls/SelectInput/SelectInput.view.tsx b/app/components/controls/SelectInput/SelectInput.view.tsx
index c0ed884..2e3bad2 100644
--- a/app/components/controls/SelectInput/SelectInput.view.tsx
+++ b/app/components/controls/SelectInput/SelectInput.view.tsx
@@ -75,7 +75,8 @@ export function SelectInputView({
 }: SelectInputViewProps) {
   // Styles based on Figma design
   const containerClasses = "flex flex-col gap-[8px]";
-  const labelClasses = "text-[14px] leading-[20px] font-medium font-inter text-[var(--color-content-default-primary)]";
+  const labelClasses =
+    "text-[14px] leading-[20px] font-medium font-inter text-[var(--color-content-default-primary)]";
 
   // Button styles per Figma
   const getButtonClasses = (): string => {
@@ -101,7 +102,9 @@ export function SelectInputView({
       cursor-pointer
       appearance-none
       m-0
-    `.trim().replace(/\s+/g, " ");
+    `
+      .trim()
+      .replace(/\s+/g, " ");
 
     if (disabled) {
       return `${baseClasses} bg-[var(--color-surface-default-secondary)] text-[var(--color-content-inverse-tertiary,#2d2d2d)] border-[var(--color-border-default-primary)] cursor-not-allowed opacity-40`;
@@ -142,10 +145,7 @@ export function SelectInputView({
       {label && (
         <div className="flex flex-wrap gap-[var(--measures-spacing-200,4px_8px)] items-baseline pr-[var(--measures-spacing-100,4px)] relative shrink-0 w-full">
           <div className="flex gap-[var(--measures-spacing-050,2px)] items-center relative shrink-0">
-            <label
-              id={labelId}
-              className={labelClasses}
-            >
+            <label id={labelId} className={labelClasses}>
               {label}
             </label>
             {asterisk && (
@@ -155,6 +155,7 @@ export function SelectInputView({
             )}
             {iconHelp && (
               <div className="relative shrink-0 size-[12px]">
+                {/* eslint-disable-next-line @next/next/no-img-element -- icon asset */}
                 <img
                   src={getAssetPath(ASSETS.ICON_HELP)}
                   alt="Help"
@@ -186,8 +187,10 @@ export function SelectInputView({
           onFocus={onButtonFocus}
           onBlur={onButtonBlur}
         >
-          <span className={`flex-1 text-left ${iconRight ? "pr-[32px]" : ""} ${textColorClass}`}>
-            {textData ? displayText : placeholder}
+          <span
+            className={`flex-1 text-left ${iconRight ? "pr-[32px]" : ""} ${textColorClass}`}
+          >
+            {textData ? displayText : _placeholder}
           </span>
           {iconRight && (
             <div className="flex items-center justify-center shrink-0">
diff --git a/app/components/controls/TextArea/TextArea.view.tsx b/app/components/controls/TextArea/TextArea.view.tsx
index b7b1fc4..cf8783c 100644
--- a/app/components/controls/TextArea/TextArea.view.tsx
+++ b/app/components/controls/TextArea/TextArea.view.tsx
@@ -48,6 +48,7 @@ export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
               </label>
               {showHelpIcon && (
                 <div className="relative shrink-0 size-[12px]">
+                  {/* eslint-disable-next-line @next/next/no-img-element -- icon asset */}
                   <img
                     src={getAssetPath(ASSETS.ICON_HELP)}
                     alt="Help"
diff --git a/app/components/controls/TextInput/TextInput.view.tsx b/app/components/controls/TextInput/TextInput.view.tsx
index 65c0317..7414013 100644
--- a/app/components/controls/TextInput/TextInput.view.tsx
+++ b/app/components/controls/TextInput/TextInput.view.tsx
@@ -45,6 +45,7 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
               </label>
               {showHelpIcon && (
                 <div className="relative shrink-0 size-[12px]">
+                  {/* eslint-disable-next-line @next/next/no-img-element -- icon asset */}
                   <img
                     src={getAssetPath(ASSETS.ICON_HELP)}
                     alt="Help"
diff --git a/app/components/icons/Avatar.tsx b/app/components/icons/Avatar.tsx
index a1d55ec..f3bc8d4 100644
--- a/app/components/icons/Avatar.tsx
+++ b/app/components/icons/Avatar.tsx
@@ -27,7 +27,10 @@ const Avatar = memo<AvatarProps>(
 
     const baseStyles = `rounded-[var(--radius-measures-radius-full)] object-cover box-border ${sizeStyles[size]} ${className}`;
 
-    return <img src={src} alt={alt} className={baseStyles} {...props} />;
+    return (
+      /* eslint-disable-next-line @next/next/no-img-element -- avatar image from URL */
+      <img src={src} alt={alt} className={baseStyles} {...props} />
+    );
   },
 );
 
diff --git a/app/components/navigation/Footer.tsx b/app/components/navigation/Footer.tsx
index fd7eb24..c9865cf 100644
--- a/app/components/navigation/Footer.tsx
+++ b/app/components/navigation/Footer.tsx
@@ -66,6 +66,7 @@ const Footer = memo(() => {
                   className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group"
                   aria-label={t("social.bluesky.ariaLabel")}
                 >
+                  {/* eslint-disable-next-line @next/next/no-img-element -- social logo */}
                   <img
                     src={getAssetPath(ASSETS.BLUESKY_LOGO)}
                     alt="Bluesky"
@@ -82,6 +83,7 @@ const Footer = memo(() => {
                   className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group"
                   aria-label={t("social.gitlab.ariaLabel")}
                 >
+                  {/* eslint-disable-next-line @next/next/no-img-element -- social icon */}
                   <img
                     src={getAssetPath(ASSETS.GITLAB_ICON)}
                     alt="GitLab"
diff --git a/app/components/navigation/TopNav/TopNav.container.tsx b/app/components/navigation/TopNav/TopNav.container.tsx
index 1036fe3..2c1e432 100644
--- a/app/components/navigation/TopNav/TopNav.container.tsx
+++ b/app/components/navigation/TopNav/TopNav.container.tsx
@@ -7,7 +7,6 @@ import MenuBarItem from "../MenuBarItem";
 import Button from "../../buttons/Button";
 import AvatarContainer from "../../utility/AvatarContainer";
 import Avatar from "../../icons/Avatar";
-import Logo from "../../icons/Logo";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import { TopNavView } from "./TopNav.view";
 import type { TopNavProps, NavSize } from "./TopNav.types";
@@ -19,12 +18,7 @@ export const avatarImages = [
 ];
 
 const TopNavContainer = memo<TopNavProps>(
-  ({
-    folderTop = false,
-    loggedIn = false,
-    profile = false,
-    logIn = true,
-  }) => {
+  ({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
     const pathname = usePathname();
     const t = useTranslation("header");
 
@@ -34,7 +28,9 @@ const TopNavContainer = memo<TopNavProps>(
       "@type": "WebSite",
       name: "CommunityRule",
       url: "https://communityrule.com",
-      ...(folderTop && { description: "Build operating manuals for successful communities" }),
+      ...(folderTop && {
+        description: "Build operating manuals for successful communities",
+      }),
       potentialAction: {
         "@type": "SearchAction",
         target: "https://communityrule.com/search?q={search_term_string}",
@@ -54,7 +50,10 @@ const TopNavContainer = memo<TopNavProps>(
 
     const renderNavigationItems = (size: NavSize) => {
       // Map NavSize to Figma MenuBarItem sizes
-      const sizeMap: Record<NavSize, "X Small" | "Small" | "Medium" | "Large" | "X Large"> = {
+      const sizeMap: Record<
+        NavSize,
+        "X Small" | "Small" | "Medium" | "Large" | "X Large"
+      > = {
         default: "Small",
         xsmall: "X Small",
         xsmallUseCases: "X Small",
@@ -85,7 +84,10 @@ const TopNavContainer = memo<TopNavProps>(
             mode={mode}
             state={pathname === item.href ? "selected" : "default"}
             reducedPadding={isUseCases}
-            ariaLabel={t("ariaLabels.navigateToPage").replace("{text}", item.text)}
+            ariaLabel={t("ariaLabels.navigateToPage").replace(
+              "{text}",
+              item.text,
+            )}
           >
             {item.text}
           </MenuBarItem>
@@ -113,7 +115,10 @@ const TopNavContainer = memo<TopNavProps>(
 
     const renderLoginButton = (size: NavSize) => {
       // Map NavSize to Figma MenuBarItem sizes
-      const sizeMap: Record<NavSize, "X Small" | "Small" | "Medium" | "Large" | "X Large"> = {
+      const sizeMap: Record<
+        NavSize,
+        "X Small" | "Small" | "Medium" | "Large" | "X Large"
+      > = {
         default: "Small",
         xsmall: "X Small",
         xsmallUseCases: "X Small",
diff --git a/app/components/navigation/TopNav/TopNav.view.tsx b/app/components/navigation/TopNav/TopNav.view.tsx
index 2c39212..013ec8d 100644
--- a/app/components/navigation/TopNav/TopNav.view.tsx
+++ b/app/components/navigation/TopNav/TopNav.view.tsx
@@ -55,18 +55,21 @@ function TopNavView({
               </div>
 
               {/* Decorative Union images for tab appearance */}
+              {/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG, not content */}
               <img
                 src={getAssetPath("assets/Union_xsm.svg")}
                 alt=""
                 role="presentation"
                 className="absolute -bottom-[3px] -right-[52px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden -z-10"
               />
+              {/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
               <img
                 src={getAssetPath("assets/Union_sm_md_lg.svg")}
                 alt=""
                 role="presentation"
                 className="absolute -bottom-[3.7px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10"
               />
+              {/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
               <img
                 src={getAssetPath("assets/Union_xlg.svg")}
                 alt=""
diff --git a/app/components/sections/HeroBanner/HeroBanner.tsx b/app/components/sections/HeroBanner/HeroBanner.tsx
index 1cc6e2c..f415731 100644
--- a/app/components/sections/HeroBanner/HeroBanner.tsx
+++ b/app/components/sections/HeroBanner/HeroBanner.tsx
@@ -46,6 +46,7 @@ const HeroBanner = memo<HeroBannerProps>(
 
             {/* Hero Image Container */}
             <div className="w-full h-full md:flex-1 rounded-[8px] overflow-hidden relative z-10 flex items-center justify-center">
+              {/* eslint-disable-next-line @next/next/no-img-element -- dynamic path from getAssetPath */}
               <img
                 src={getAssetPath("assets/HeroImage.png")}
                 alt={imageAlt}
diff --git a/app/components/sections/RuleStack/RuleStack.view.tsx b/app/components/sections/RuleStack/RuleStack.view.tsx
index 533f1f0..54e3b9c 100644
--- a/app/components/sections/RuleStack/RuleStack.view.tsx
+++ b/app/components/sections/RuleStack/RuleStack.view.tsx
@@ -16,19 +16,24 @@ export function RuleStackView({
 }: RuleStackViewProps) {
   const t = useTranslation("pages.home.ruleStack");
   const [isMounted, setIsMounted] = useState(false);
-  
+
   // Debug: Log button text to ensure translation works
   const buttonText = t("button.seeAllTemplates");
 
   // Determine current breakpoint for RuleCard size
   // 320-639: XS, 640-767: S, 768-1023: S, 1024-1439: M, 1440+: L
   const isMax639 = useMediaQuery("(max-width: 639px)");
-  const isMin640Max1023 = useMediaQuery("(min-width: 640px) and (max-width: 1023px)");
-  const isMin1024Max1439 = useMediaQuery("(min-width: 1024px) and (max-width: 1439px)");
+  const isMin640Max1023 = useMediaQuery(
+    "(min-width: 640px) and (max-width: 1023px)",
+  );
+  const isMin1024Max1439 = useMediaQuery(
+    "(min-width: 1024px) and (max-width: 1439px)",
+  );
   const isMin1440 = useMediaQuery("(min-width: 1440px)");
 
   // Handle hydration: only use media queries after mount
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: defer breakpoint until after mount to avoid hydration mismatch
     setIsMounted(true);
   }, []);
 
@@ -38,12 +43,12 @@ export function RuleStackView({
     ? isMax639
       ? "XS"
       : isMin640Max1023
-      ? "S"
-      : isMin1024Max1439
-      ? "M"
-      : isMin1440
-      ? "L"
-      : "M"
+        ? "S"
+        : isMin1024Max1439
+          ? "M"
+          : isMin1440
+            ? "L"
+            : "M"
     : "M";
 
   // Icon sizes: XS=40px, S=56px, M=56px, L=90px
@@ -150,17 +155,15 @@ export function RuleStackView({
       </div>
 
       {/* See all templates button */}
-      <div className="
+      <div
+        className="
         flex justify-center w-full
         max-[767px]:mt-[var(--measures-spacing-600,24px)]
         min-[768px]:max-[1023px]:mt-[var(--measures-spacing-800,32px)]
         min-[1024px]:mt-[var(--measures-spacing-1000,40px)]
-      ">
-        <Button
-          buttonType="outline"
-          palette="default"
-          size="large"
-        >
+      "
+      >
+        <Button buttonType="outline" palette="default" size="large">
           {buttonText}
         </Button>
       </div>
diff --git a/app/components/sections/SectionNumber.tsx b/app/components/sections/SectionNumber.tsx
index 0595c48..5c687e1 100644
--- a/app/components/sections/SectionNumber.tsx
+++ b/app/components/sections/SectionNumber.tsx
@@ -26,6 +26,7 @@ const SectionNumber = memo<SectionNumberProps>(({ number }) => {
 
   return (
     <div className="relative size-[40px] overflow-visible -rotate-[15deg]">
+      {/* eslint-disable-next-line @next/next/no-img-element -- dynamic src from getImageSrc */}
       <img
         src={getImageSrc(number)}
         alt={`Section ${number}`}
diff --git a/app/components/type/ContentLockup/ContentLockup.view.tsx b/app/components/type/ContentLockup/ContentLockup.view.tsx
index 68d7e3d..b8346ff 100644
--- a/app/components/type/ContentLockup/ContentLockup.view.tsx
+++ b/app/components/type/ContentLockup/ContentLockup.view.tsx
@@ -60,12 +60,15 @@ function ContentLockupView({
                 </h1>
               ) : null}
               {variant === "hero" && (
-                <img
-                  src={getAssetPath("assets/Shapes_1.svg")}
-                  alt=""
-                  className={styles.shape}
-                  role="presentation"
-                />
+                <>
+                  {/* eslint-disable-next-line @next/next/no-img-element -- decorative shape SVG */}
+                  <img
+                    src={getAssetPath("assets/Shapes_1.svg")}
+                    alt=""
+                    className={styles.shape}
+                    role="presentation"
+                  />
+                </>
               )}
             </div>
 
diff --git a/app/components/utility/CardStack/CardStack.container.tsx b/app/components/utility/CardStack/CardStack.container.tsx
index 7624537..5626ea8 100644
--- a/app/components/utility/CardStack/CardStack.container.tsx
+++ b/app/components/utility/CardStack/CardStack.container.tsx
@@ -20,6 +20,7 @@ const CardStackContainer = memo<CardStackProps>(
     showLessLabel = DEFAULT_SHOW_LESS_LABEL,
     title = "",
     description = "",
+    layout = "default",
     className = "",
   }) => {
     const [internalExpanded, setInternalExpanded] = useState(false);
@@ -68,6 +69,7 @@ const CardStackContainer = memo<CardStackProps>(
         showLessLabel={showLessLabel}
         title={title}
         description={description}
+        layout={layout}
         className={className}
       />
     );
diff --git a/app/components/utility/CardStack/CardStack.types.ts b/app/components/utility/CardStack/CardStack.types.ts
index 7dfe180..2c23324 100644
--- a/app/components/utility/CardStack/CardStack.types.ts
+++ b/app/components/utility/CardStack/CardStack.types.ts
@@ -17,6 +17,8 @@ export interface CardStackProps {
   showLessLabel?: string;
   title?: string;
   description?: string;
+  /** "default" = compact grid/column + expanded grid; "singleStack" = always one column, expand shows more in same stack */
+  layout?: "default" | "singleStack";
   className?: string;
 }
 
@@ -31,5 +33,6 @@ export interface CardStackViewProps {
   showLessLabel: string;
   title: string;
   description: string;
+  layout: "default" | "singleStack";
   className: string;
 }
diff --git a/app/components/utility/CardStack/CardStack.view.tsx b/app/components/utility/CardStack/CardStack.view.tsx
index 23eb8de..34af000 100644
--- a/app/components/utility/CardStack/CardStack.view.tsx
+++ b/app/components/utility/CardStack/CardStack.view.tsx
@@ -15,17 +15,59 @@ export function CardStackView({
   showLessLabel,
   title,
   description,
+  layout,
   className,
 }: CardStackViewProps) {
   const isSelected = (id: string) => selectedIds.includes(id);
   // Compact: recommended only (up to 5). Expanded: all cards.
-  const compactCards = cards
-    .filter((c) => c.recommended ?? false)
-    .slice(0, 5);
+  const compactCards = cards.filter((c) => c.recommended ?? false).slice(0, 5);
+
+  // Single stack: always one column; expand reveals more in same stack (scrollable)
+  if (layout === "singleStack") {
+    const displayedCards = expanded ? cards : compactCards;
+    return (
+      <div className={`flex w-full flex-col gap-6 min-w-0 ${className}`}>
+        {title || description ? (
+          <div className="min-w-0 shrink-0">
+            <HeaderLockup
+              title={title}
+              description={description}
+              justification="center"
+              size="L"
+            />
+          </div>
+        ) : null}
+        <div className="flex flex-col gap-[8px] w-full min-w-0">
+          {displayedCards.map((item) => (
+            <Card
+              key={item.id}
+              id={item.id}
+              label={item.label}
+              supportText={item.supportText}
+              recommended={item.recommended ?? false}
+              selected={isSelected(item.id)}
+              orientation="vertical"
+              showInfoIcon={true}
+              onClick={() => onCardSelect(item.id)}
+            />
+          ))}
+        </div>
+        {hasMore ? (
+          <button
+            type="button"
+            onClick={onToggleExpand}
+            className="font-inter text-base font-normal leading-6 text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none self-center cursor-pointer"
+          >
+            {expanded ? showLessLabel : toggleLabel}
+          </button>
+        ) : null}
+      </div>
+    );
+  }
 
   return (
     <div className={`flex w-full flex-col gap-6 min-w-0 ${className}`}>
-      {(title || description) ? (
+      {title || description ? (
         <div className="min-w-0">
           <HeaderLockup
             title={title}
diff --git a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx
index d132207..c721b6a 100644
--- a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx
+++ b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx
@@ -17,7 +17,7 @@ export function CreateFlowTopNavView({
 
   return (
     <header
-      className={`bg-black w-full border-b border-[var(--color-border-default-tertiary)] ${className}`}
+      className={`bg-black w-full ${className}`}
       role="banner"
       aria-label="Create Rule Flow Navigation"
     >
diff --git a/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx b/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx
new file mode 100644
index 0000000..74c687c
--- /dev/null
+++ b/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { memo } from "react";
+import DecisionMakingSidebarView from "./DecisionMakingSidebar.view";
+import type { DecisionMakingSidebarProps } from "./DecisionMakingSidebar.types";
+import {
+  normalizeHeaderLockupJustification,
+  normalizeHeaderLockupSize,
+} from "../../../../lib/propNormalization";
+
+const DecisionMakingSidebarContainer = memo<DecisionMakingSidebarProps>(
+  ({
+    title,
+    description,
+    messageBoxTitle,
+    messageBoxItems,
+    messageBoxCheckedIds,
+    onMessageBoxCheckboxChange,
+    size: sizeProp = "L",
+    justification: justificationProp = "left",
+    className = "",
+  }) => {
+    const size = normalizeHeaderLockupSize(sizeProp);
+    const justification = normalizeHeaderLockupJustification(justificationProp);
+
+    return (
+      <DecisionMakingSidebarView
+        title={title}
+        description={description}
+        messageBoxTitle={messageBoxTitle}
+        messageBoxItems={messageBoxItems}
+        messageBoxCheckedIds={messageBoxCheckedIds}
+        onMessageBoxCheckboxChange={onMessageBoxCheckboxChange}
+        size={size}
+        justification={justification}
+        className={className}
+      />
+    );
+  },
+);
+
+DecisionMakingSidebarContainer.displayName = "DecisionMakingSidebar";
+
+export default DecisionMakingSidebarContainer;
diff --git a/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.types.ts b/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.types.ts
new file mode 100644
index 0000000..8579770
--- /dev/null
+++ b/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.types.ts
@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import type {
+  HeaderLockupJustificationValue,
+  HeaderLockupSizeValue,
+} from "../../type/HeaderLockup/HeaderLockup.types";
+import type { InfoMessageBoxItem } from "../InfoMessageBox/InfoMessageBox.types";
+
+export interface DecisionMakingSidebarProps {
+  title: string;
+  /** Description text or ReactNode (e.g. with underlined "add") */
+  description?: string | ReactNode;
+  messageBoxTitle: string;
+  messageBoxItems: InfoMessageBoxItem[];
+  messageBoxCheckedIds?: string[];
+  onMessageBoxCheckboxChange?: (id: string, checked: boolean) => void;
+  size?: HeaderLockupSizeValue;
+  justification?: HeaderLockupJustificationValue;
+  className?: string;
+}
+
+export interface DecisionMakingSidebarViewProps {
+  title: string;
+  description: string | ReactNode | undefined;
+  messageBoxTitle: string;
+  messageBoxItems: InfoMessageBoxItem[];
+  messageBoxCheckedIds: string[] | undefined;
+  onMessageBoxCheckboxChange: ((id: string, checked: boolean) => void) | undefined;
+  size: "L" | "M";
+  justification: "left" | "center";
+  className: string;
+}
diff --git a/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.view.tsx b/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.view.tsx
new file mode 100644
index 0000000..3012e4b
--- /dev/null
+++ b/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.view.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { memo } from "react";
+import HeaderLockup from "../../type/HeaderLockup";
+import InfoMessageBox from "../InfoMessageBox";
+import type { DecisionMakingSidebarViewProps } from "./DecisionMakingSidebar.types";
+
+function DecisionMakingSidebarView({
+  title,
+  description,
+  messageBoxTitle,
+  messageBoxItems,
+  messageBoxCheckedIds,
+  onMessageBoxCheckboxChange,
+  size,
+  justification,
+  className,
+}: DecisionMakingSidebarViewProps) {
+  const isL = size === "L";
+  const isLeft = justification === "left";
+  const isStringDescription = typeof description === "string";
+
+  return (
+    <div className={`flex flex-col gap-3 w-full min-w-0 ${className}`}>
+      {isStringDescription ? (
+        <HeaderLockup
+          title={title}
+          description={description as string}
+          justification={justification}
+          size={size}
+        />
+      ) : (
+        <div
+          className={`flex flex-col gap-[var(--measures-spacing-200,8px)] py-[12px] relative ${
+            isLeft ? "items-start" : "items-center"
+          }`}
+        >
+          <div className="flex items-center relative shrink-0 w-full">
+            <h1
+              className={`flex-[1_0_0] min-h-px min-w-px overflow-hidden relative text-[var(--color-content-default-primary,white)] text-ellipsis whitespace-pre-wrap ${
+                isLeft ? "text-left" : "text-center"
+              } ${
+                isL
+                  ? "font-bricolage-grotesque font-extrabold text-[36px] leading-[44px]"
+                  : "font-bricolage-grotesque font-bold text-[28px] leading-[36px]"
+              }`}
+            >
+              {title}
+            </h1>
+          </div>
+          {description != null && (
+            <p
+              className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 text-[var(--color-content-default-tertiary,#b4b4b4)] text-ellipsis w-full whitespace-pre-wrap ${
+                isLeft ? "" : "text-center"
+              } ${
+                isL
+                  ? "text-[18px] leading-[1.3]"
+                  : "text-[14px] leading-[20px]"
+              }`}
+            >
+              {description}
+            </p>
+          )}
+        </div>
+      )}
+      <InfoMessageBox
+        title={messageBoxTitle}
+        items={messageBoxItems}
+        checkedIds={messageBoxCheckedIds}
+        onCheckboxChange={onMessageBoxCheckboxChange ?? undefined}
+      />
+    </div>
+  );
+}
+
+DecisionMakingSidebarView.displayName = "DecisionMakingSidebarView";
+
+export default memo(DecisionMakingSidebarView);
diff --git a/app/components/utility/DecisionMakingSidebar/index.tsx b/app/components/utility/DecisionMakingSidebar/index.tsx
new file mode 100644
index 0000000..30e82d5
--- /dev/null
+++ b/app/components/utility/DecisionMakingSidebar/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./DecisionMakingSidebar.container";
+export type { DecisionMakingSidebarProps } from "./DecisionMakingSidebar.types";
diff --git a/app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx b/app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx
new file mode 100644
index 0000000..763d8ee
--- /dev/null
+++ b/app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { memo, useCallback, useState } from "react";
+import InfoMessageBoxView from "./InfoMessageBox.view";
+import type { InfoMessageBoxProps } from "./InfoMessageBox.types";
+
+const InfoMessageBoxContainer = memo<InfoMessageBoxProps>(
+  ({
+    title,
+    items,
+    icon,
+    checkedIds: controlledCheckedIds,
+    onCheckboxChange,
+    className = "",
+  }) => {
+    const [internalCheckedIds, setInternalCheckedIds] = useState<string[]>([]);
+    const checkedIds =
+      controlledCheckedIds !== undefined
+        ? controlledCheckedIds
+        : internalCheckedIds;
+
+    const handleGroupChange = useCallback(
+      (newValue: string[]) => {
+        if (controlledCheckedIds === undefined) {
+          setInternalCheckedIds(newValue);
+        }
+        if (!onCheckboxChange) return;
+        const prevSet = new Set(checkedIds);
+        const newSet = new Set(newValue);
+        items.forEach((item) => {
+          const nowChecked = newSet.has(item.id);
+          const wasChecked = prevSet.has(item.id);
+          if (nowChecked !== wasChecked) {
+            onCheckboxChange(item.id, nowChecked);
+          }
+        });
+      },
+      [checkedIds, controlledCheckedIds, items, onCheckboxChange],
+    );
+
+    return (
+      <InfoMessageBoxView
+        title={title}
+        items={items}
+        icon={icon}
+        checkedIds={checkedIds}
+        onGroupChange={handleGroupChange}
+        className={className}
+      />
+    );
+  },
+);
+
+InfoMessageBoxContainer.displayName = "InfoMessageBox";
+
+export default InfoMessageBoxContainer;
diff --git a/app/components/utility/InfoMessageBox/InfoMessageBox.types.ts b/app/components/utility/InfoMessageBox/InfoMessageBox.types.ts
new file mode 100644
index 0000000..1a60054
--- /dev/null
+++ b/app/components/utility/InfoMessageBox/InfoMessageBox.types.ts
@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+
+export interface InfoMessageBoxItem {
+  id: string;
+  label: string;
+}
+
+export interface InfoMessageBoxProps {
+  /** Heading text for the message box */
+  title: string;
+  /** Checkbox items (id used as value for CheckboxGroup) */
+  items: InfoMessageBoxItem[];
+  /** Optional icon (e.g. exclamation); default exclamation icon used if not provided */
+  icon?: ReactNode;
+  /** Controlled checked ids; if undefined, uncontrolled */
+  checkedIds?: string[];
+  /** Callback when a checkbox is toggled */
+  onCheckboxChange?: (id: string, checked: boolean) => void;
+  className?: string;
+}
+
+export interface InfoMessageBoxViewProps {
+  title: string;
+  items: InfoMessageBoxItem[];
+  icon?: ReactNode;
+  checkedIds: string[];
+  onGroupChange: (value: string[]) => void;
+  className: string;
+}
diff --git a/app/components/utility/InfoMessageBox/InfoMessageBox.view.tsx b/app/components/utility/InfoMessageBox/InfoMessageBox.view.tsx
new file mode 100644
index 0000000..e2e44ff
--- /dev/null
+++ b/app/components/utility/InfoMessageBox/InfoMessageBox.view.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { memo } from "react";
+import CheckboxGroup from "../../controls/CheckboxGroup";
+import type { InfoMessageBoxViewProps } from "./InfoMessageBox.types";
+
+/** Exclamation icon per Figma 19751:35053 – vertical bar + dot inside circle; circle bg white 10% opacity, no border */
+function ExclamationIconInline() {
+  const fillColor = "var(--color-content-default-primary, white)";
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="shrink-0"
+      aria-hidden
+    >
+      <circle cx="12" cy="12" r="10" fill="rgba(255,255,255,0.1)" />
+      <path
+        d="M11.25 14.0386V5.53857H12.75V14.0386H11.25ZM11.25 18.4616V16.9616H12.75V18.4616H11.25Z"
+        fill={fillColor}
+      />
+    </svg>
+  );
+}
+
+function InfoMessageBoxView({
+  title,
+  items,
+  icon,
+  checkedIds,
+  onGroupChange,
+  className,
+}: InfoMessageBoxViewProps) {
+  const options = items.map((item) => ({
+    value: item.id,
+    label: item.label,
+  }));
+
+  const handleChange = (data: { value: string[] }) => {
+    onGroupChange(data.value);
+  };
+
+  return (
+    <div
+      className={`flex flex-col gap-[12px] p-[var(--spacing-measures-spacing-500,20px)] rounded-[var(--measures-radius-300,12px)] border-l-2 border-solid border-[var(--color-border-default-secondary,#1f1f1f)] bg-[var(--color-content-inverse-secondary,#1f1f1f)] w-full min-w-0 ${className}`}
+      role="region"
+      aria-label={title}
+    >
+      <div className="flex items-center gap-[var(--measures-spacing-200,8px)] min-w-0">
+        <div
+          className="relative shrink-0 size-6 flex items-center justify-center"
+          data-name="Asset / Icon / exclamation"
+        >
+          {icon ?? <ExclamationIconInline />}
+        </div>
+        <p className="font-inter font-medium text-[14px] leading-[16px] text-[var(--color-content-default-primary,white)] min-w-0">
+          {title}
+        </p>
+      </div>
+      <div className="flex flex-col gap-[12px] [&_label]:gap-[6px] [&_label_span]:text-[12px] [&_label_span]:leading-[16px] [&_label_span]:opacity-80 pl-8">
+        <CheckboxGroup
+          mode="standard"
+          value={checkedIds}
+          onChange={handleChange}
+          options={options}
+          aria-label={title}
+          className="flex flex-col gap-[12px] !space-y-0"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default memo(InfoMessageBoxView);
diff --git a/app/components/utility/InfoMessageBox/index.tsx b/app/components/utility/InfoMessageBox/index.tsx
new file mode 100644
index 0000000..881390d
--- /dev/null
+++ b/app/components/utility/InfoMessageBox/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./InfoMessageBox.container";
+export type { InfoMessageBoxProps, InfoMessageBoxItem } from "./InfoMessageBox.types";
diff --git a/app/components/utility/InputLabel/InputLabel.view.tsx b/app/components/utility/InputLabel/InputLabel.view.tsx
index 79fe5c4..632c8e9 100644
--- a/app/components/utility/InputLabel/InputLabel.view.tsx
+++ b/app/components/utility/InputLabel/InputLabel.view.tsx
@@ -75,6 +75,7 @@ function InputLabelView({
         </div>
         {helpIcon && (
           <div className={`relative shrink-0 ${helpIconSize}`}>
+            {/* eslint-disable-next-line @next/next/no-img-element -- icon from asset path */}
             <img
               src={getAssetPath(ASSETS.ICON_HELP)}
               alt="Help"
diff --git a/app/components/utility/ModalHeader/ModalHeader.view.tsx b/app/components/utility/ModalHeader/ModalHeader.view.tsx
index 4bdad22..aac6486 100644
--- a/app/components/utility/ModalHeader/ModalHeader.view.tsx
+++ b/app/components/utility/ModalHeader/ModalHeader.view.tsx
@@ -19,6 +19,7 @@ export function ModalHeaderView({
           className="absolute bg-[var(--color-surface-default-secondary)] h-[24px] w-[24px] rounded-full left-[24px] top-[12px] flex items-center justify-center cursor-pointer"
           aria-label="Close dialog"
         >
+          {/* eslint-disable-next-line @next/next/no-img-element -- icon asset */}
           <img
             src={getAssetPath("assets/Icon_Close.svg")}
             alt=""
diff --git a/app/components/utility/Tag/Tag.view.tsx b/app/components/utility/Tag/Tag.view.tsx
index 01bf193..26db892 100644
--- a/app/components/utility/Tag/Tag.view.tsx
+++ b/app/components/utility/Tag/Tag.view.tsx
@@ -10,16 +10,12 @@ import type { TagViewProps } from "./Tag.types";
  */
 export function TagView({ variant, children, className }: TagViewProps) {
   const isRecommended = variant === "recommended";
-  const bgClass = isRecommended
-    ? "bg-[#F6EEA7]"
-    : "bg-[#3F3F3F]";
-  const textClass = isRecommended
-    ? "text-[#3F3F3F]"
-    : "text-[#FFFFFF]";
+  const bgClass = isRecommended ? "bg-[#F6EEA7]" : "bg-[#3F3F3F]";
+  const textClass = isRecommended ? "text-[#3F3F3F]" : "text-[#FFFFFF]";
 
   return (
     <span
-      className={`inline-flex items-center justify-center rounded px-2 py-0.5 font-inter text-[10px] font-medium uppercase leading-3 ${bgClass} ${textClass} ${className}`}
+      className={`inline-flex w-[6rem] min-w-[6rem] items-center justify-center rounded px-2 py-0.5 font-inter text-[10px] font-medium uppercase leading-3 ${bgClass} ${textClass} ${className}`}
       role="status"
     >
       {children}
diff --git a/app/contexts/MessagesContext.tsx b/app/contexts/MessagesContext.tsx
index 92e4fc7..cb17c37 100644
--- a/app/contexts/MessagesContext.tsx
+++ b/app/contexts/MessagesContext.tsx
@@ -39,11 +39,11 @@ export function useMessages(): Messages {
  */
 function getTranslationValue(messages: Messages, key: string): string {
   const keys = key.split(".");
-  let value: any = messages;
+  let value: unknown = messages;
 
   for (const k of keys) {
     if (value && typeof value === "object" && k in value) {
-      value = value[k as keyof typeof value];
+      value = (value as Record<string, unknown>)[k];
     } else {
       return key; // Fallback to key if path not found
     }
diff --git a/app/create/cards/page.tsx b/app/create/cards/page.tsx
index 2814345..184ee80 100644
--- a/app/create/cards/page.tsx
+++ b/app/create/cards/page.tsx
@@ -52,8 +52,7 @@ const ADD_PLATFORM_MODALS: Record<
   },
   [VIDEO_MEETINGS_CARD_ID]: {
     title: "Video Meetings",
-    description:
-      "Synchronous video calls for remote face-to-face interaction.",
+    description: "Synchronous video calls for remote face-to-face interaction.",
     nextButtonText: "Add Platform",
   },
 };
@@ -93,12 +92,12 @@ const ADD_PLATFORM_SECTION_DEFAULTS: Record<
  */
 function CreateModalSection({
   title,
-  value,
+  value: _value,
   onChange,
 }: {
   title: string;
   value: string;
-  onChange: (value: string) => void;
+  onChange: (_value: string) => void;
 }) {
   return (
     <div className="flex flex-col gap-2">
@@ -115,7 +114,7 @@ function CreateModalSection({
       </div>
       <TextArea
         formHeader={false}
-        value={value}
+        value={_value}
         onChange={(e) => onChange(e.target.value)}
         size="large"
         rows={6}
@@ -126,9 +125,15 @@ function CreateModalSection({
 }
 
 /** Body for any "Add platform" modal: three editable sections (TextArea only). */
-function AddPlatformModalContent({ platformCardId }: { platformCardId: string }) {
+function AddPlatformModalContent({
+  platformCardId,
+}: {
+  platformCardId: string;
+}) {
   const defaults = ADD_PLATFORM_SECTION_DEFAULTS[platformCardId];
-  const [sectionValues, setSectionValues] = useState<Record<SectionKey, string>>(
+  const [sectionValues, setSectionValues] = useState<
+    Record<SectionKey, string>
+  >(
     defaults ?? {
       "Core Principle & Scope": "",
       "Logistics, Admin & Norms": "",
@@ -168,15 +173,13 @@ const SAMPLE_CARDS = [
   {
     id: SIGNAL_CARD_ID,
     label: "Signal",
-    supportText:
-      "Encrypted messaging for high-security, private coordination.",
+    supportText: "Encrypted messaging for high-security, private coordination.",
     recommended: true,
   },
   {
     id: VIDEO_MEETINGS_CARD_ID,
     label: "Video Meetings",
-    supportText:
-      "Synchronous video calls for remote face-to-face interaction.",
+    supportText: "Synchronous video calls for remote face-to-face interaction.",
     recommended: true,
   },
   {
diff --git a/app/create/right-rail/page.tsx b/app/create/right-rail/page.tsx
new file mode 100644
index 0000000..d99b8e3
--- /dev/null
+++ b/app/create/right-rail/page.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
+import DecisionMakingSidebar from "../../components/utility/DecisionMakingSidebar";
+import CardStack from "../../components/utility/CardStack";
+import type { InfoMessageBoxItem } from "../../components/utility/InfoMessageBox/InfoMessageBox.types";
+import type { CardStackItem } from "../../components/utility/CardStack/CardStack.types";
+
+const SIDEBAR_TITLE = "How should conflicts be resolved?";
+
+const SIDEBAR_DESCRIPTION = (
+  <>
+    You can also combine or <span className="underline">add</span> new
+    approaches to the list
+  </>
+);
+
+const MESSAGE_BOX_TITLE =
+  "Consider defining approaches to steward key resources:";
+
+const MESSAGE_BOX_ITEMS: InfoMessageBoxItem[] = [
+  { id: "amend", label: "Amend your CommunityRule" },
+  { id: "finances", label: "Steward finances" },
+  { id: "project", label: "Project level decisions" },
+  { id: "discipline", label: "Discipline and member termination" },
+];
+
+const SAMPLE_CARDS: CardStackItem[] = [
+  {
+    id: "mediation",
+    label: "Mediation",
+    supportText:
+      "Collaborative work to reach a resolution that all parties can agree upon.",
+    recommended: true,
+  },
+  {
+    id: "facilitation",
+    label: "Facilitated dialogue",
+    supportText:
+      "Structured sessions where parties collaboratively resolve disputes.",
+    recommended: true,
+  },
+  {
+    id: "invite-only",
+    label: "Invite-only",
+    supportText: "Private discussions with selected participants.",
+    recommended: true,
+  },
+  {
+    id: "arbitration",
+    label: "Arbitration",
+    supportText: "Arbitrators are chosen specifically for a particular case.",
+    recommended: true,
+  },
+  {
+    id: "direct-dialogue",
+    label: "Direct dialogue",
+    supportText:
+      "Encouraging direct, respectful dialogue between those involved.",
+    recommended: true,
+  },
+  // Extra cards to test scrolling (only visible when "See all" is expanded)
+  { id: "label-1", label: "Label", supportText: "", recommended: false },
+  { id: "label-2", label: "Label", supportText: "", recommended: false },
+  { id: "label-3", label: "Label", supportText: "", recommended: false },
+  { id: "label-4", label: "Label", supportText: "", recommended: false },
+  { id: "label-5", label: "Label", supportText: "", recommended: false },
+  { id: "label-6", label: "Label", supportText: "", recommended: false },
+  { id: "label-7", label: "Label", supportText: "", recommended: false },
+  { id: "label-8", label: "Label", supportText: "", recommended: false },
+  { id: "label-9", label: "Label", supportText: "", recommended: false },
+  { id: "label-10", label: "Label", supportText: "", recommended: false },
+];
+
+/**
+ * Right Rail step of the create flow.
+ * Two-column layout (sidebar + card stack) at 640+, single column at 320-639.
+ */
+export default function RightRailPage() {
+  const [isMounted, setIsMounted] = useState(false);
+  const isMdOrLarger = useMediaQuery("(min-width: 640px)");
+  const [messageBoxCheckedIds, setMessageBoxCheckedIds] = useState<string[]>(
+    [],
+  );
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [expanded, setExpanded] = useState(false);
+
+  // Avoid flash: only use breakpoint after mount so SSR and first paint use same layout (desktop).
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: defer layout breakpoint until after mount to prevent flash
+    setIsMounted(true);
+  }, []);
+
+  const showDesktopLayout = !isMounted || isMdOrLarger;
+
+  const handleMessageBoxCheckboxChange = useCallback(
+    (id: string, checked: boolean) => {
+      setMessageBoxCheckedIds((prev) =>
+        checked ? [...prev, id] : prev.filter((x) => x !== id),
+      );
+    },
+    [],
+  );
+
+  const handleCardSelect = useCallback((id: string) => {
+    setSelectedIds((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+    );
+  }, []);
+
+  const handleToggleExpand = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+
+  if (showDesktopLayout) {
+    return (
+      <div className="w-full flex flex-col items-center px-5 md:px-12">
+        <div className="flex gap-12 items-stretch w-full max-w-[1280px] min-w-0">
+          <div className="flex flex-1 flex-col justify-center gap-3 min-w-0">
+            <DecisionMakingSidebar
+              title={SIDEBAR_TITLE}
+              description={SIDEBAR_DESCRIPTION}
+              messageBoxTitle={MESSAGE_BOX_TITLE}
+              messageBoxItems={MESSAGE_BOX_ITEMS}
+              messageBoxCheckedIds={messageBoxCheckedIds}
+              onMessageBoxCheckboxChange={handleMessageBoxCheckboxChange}
+              size="L"
+              justification="left"
+            />
+          </div>
+          <div className="flex flex-1 flex-col gap-6 items-center min-w-0">
+            <CardStack
+              cards={SAMPLE_CARDS}
+              selectedIds={selectedIds}
+              onCardSelect={handleCardSelect}
+              expanded={expanded}
+              onToggleExpand={handleToggleExpand}
+              hasMore={true}
+              toggleLabel="See all decision approaches"
+              showLessLabel="Show less"
+              title=""
+              description=""
+              layout="singleStack"
+              className="w-full"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full flex flex-col items-center px-5">
+      <div className="flex flex-col gap-6 w-full min-w-0">
+        <DecisionMakingSidebar
+          title={SIDEBAR_TITLE}
+          description={SIDEBAR_DESCRIPTION}
+          messageBoxTitle={MESSAGE_BOX_TITLE}
+          messageBoxItems={MESSAGE_BOX_ITEMS}
+          messageBoxCheckedIds={messageBoxCheckedIds}
+          onMessageBoxCheckboxChange={handleMessageBoxCheckboxChange}
+          size="M"
+          justification="center"
+        />
+        <div className="flex flex-col gap-6 items-center w-full">
+          <CardStack
+            cards={SAMPLE_CARDS}
+            selectedIds={selectedIds}
+            onCardSelect={handleCardSelect}
+            expanded={expanded}
+            onToggleExpand={handleToggleExpand}
+            hasMore={true}
+            toggleLabel="See all decision approaches"
+            showLessLabel="Show less"
+            title=""
+            description=""
+            layout="singleStack"
+            className="w-full"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/create/types.ts b/app/create/types.ts
index 7315e1d..b53f1c6 100644
--- a/app/create/types.ts
+++ b/app/create/types.ts
@@ -35,7 +35,7 @@ export interface CreateFlowState {
 export interface CreateFlowContextValue {
   state: CreateFlowState;
   currentStep: CreateFlowStep | null;
-  updateState: (updates: Partial<CreateFlowState>) => void;
+  updateState: (_updates: Partial<CreateFlowState>) => void;
   // Navigation handlers will be added in CR-56
 }
 
@@ -55,7 +55,7 @@ export interface PageTemplateProps {
 export interface NavigationHandlers {
   goToNextStep: () => void;
   goToPreviousStep: () => void;
-  goToStep: (step: CreateFlowStep) => void;
+  goToStep: (_step: CreateFlowStep) => void;
   canGoNext: () => boolean;
   canGoBack: () => boolean;
 }
diff --git a/app/create/upload/page.tsx b/app/create/upload/page.tsx
index cdef335..24afa68 100644
--- a/app/create/upload/page.tsx
+++ b/app/create/upload/page.tsx
@@ -6,7 +6,7 @@ import Upload from "../../components/controls/Upload";
 
 /**
  * Upload page for the create flow
- * 
+ *
  * Displays upload functionality using HeaderLockup and Upload components.
  * Responsive layout: centered at 640px+, left-aligned below 640px.
  * Responsive sizing: uses L/M for HeaderLockup based on 640px breakpoint.
@@ -15,8 +15,7 @@ export default function UploadPage() {
   const isMdOrLarger = useMediaQuery("(min-width: 640px)");
 
   const handleUploadClick = () => {
-    // Handle upload button click
-    console.log("Upload clicked");
+    // TODO: Handle upload button click (e.g. open file picker)
   };
 
   return (
diff --git a/app/hooks/useMediaQuery.ts b/app/hooks/useMediaQuery.ts
index c298c09..8cf095d 100644
--- a/app/hooks/useMediaQuery.ts
+++ b/app/hooks/useMediaQuery.ts
@@ -52,6 +52,7 @@ export function useMediaQuery(
     }
 
     const media = window.matchMedia(mediaQuery);
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- sync with external system (matchMedia)
     setMatches(media.matches);
 
     const listener = (event: MediaQueryListEvent) => {
@@ -67,7 +68,7 @@ export function useMediaQuery(
       media.addListener(listener);
       return () => media.removeListener(listener);
     }
-  }, [query, direction]);
+  }, [mediaQuery]);
 
   return matches;
 }
diff --git a/lib/i18n/getTranslation.ts b/lib/i18n/getTranslation.ts
index b737704..690fc0e 100644
--- a/lib/i18n/getTranslation.ts
+++ b/lib/i18n/getTranslation.ts
@@ -13,11 +13,11 @@ type Messages = typeof messages;
  */
 export function getTranslation(messages: Messages, key: string): string {
   const keys = key.split(".");
-  let value: any = messages;
+  let value: unknown = messages;
 
   for (const k of keys) {
     if (value && typeof value === "object" && k in value) {
-      value = value[k as keyof typeof value];
+      value = (value as Record<string, unknown>)[k];
     } else {
       // Fallback to key if path not found
       return key;
@@ -42,11 +42,11 @@ export function getNested<T extends keyof Messages>(
   }
 
   const keys = key.split(".");
-  let value: any = namespaceObj;
+  let value: unknown = namespaceObj;
 
   for (const k of keys) {
     if (value && typeof value === "object" && k in value) {
-      value = value[k];
+      value = (value as Record<string, unknown>)[k];
     } else {
       return key;
     }
diff --git a/tests/components/ContentBanner.test.tsx b/tests/components/ContentBanner.test.tsx
index b3ee80c..b15b54d 100644
--- a/tests/components/ContentBanner.test.tsx
+++ b/tests/components/ContentBanner.test.tsx
@@ -5,7 +5,15 @@ import ContentBanner from "../../app/components/sections/ContentBanner";
 import type { BlogPost } from "../../lib/content";
 
 vi.mock("next/link", () => ({
-  default: ({ children, href, ...props }: any) => (
+  default: ({
+    children,
+    href,
+    ...props
+  }: {
+    children?: React.ReactNode;
+    href?: string;
+    [key: string]: unknown;
+  }) => (
     <a href={href} {...props}>
       {children}
     </a>
diff --git a/tests/components/CreateFlowFooter.test.tsx b/tests/components/CreateFlowFooter.test.tsx
index 971c0c8..b1798de 100644
--- a/tests/components/CreateFlowFooter.test.tsx
+++ b/tests/components/CreateFlowFooter.test.tsx
@@ -44,7 +44,9 @@ describe("CreateFlowFooter (behavioral tests)", () => {
 
   it("renders progress bar when progressBar is true", () => {
     render(<CreateFlowFooter progressBar={true} />);
-    const footer = screen.getByRole("contentinfo", { name: "Create Flow Footer" });
+    const footer = screen.getByRole("contentinfo", {
+      name: "Create Flow Footer",
+    });
     expect(footer).toBeInTheDocument();
   });
 
diff --git a/tests/components/CreateFlowTopNav.test.tsx b/tests/components/CreateFlowTopNav.test.tsx
index 6cd3b2e..616a6c2 100644
--- a/tests/components/CreateFlowTopNav.test.tsx
+++ b/tests/components/CreateFlowTopNav.test.tsx
@@ -80,7 +80,9 @@ describe("CreateFlowTopNav (behavioral tests)", () => {
 
   it("does not render Share button when hasShare is false", () => {
     render(<CreateFlowTopNav hasShare={false} />);
-    expect(screen.queryByRole("button", { name: "Share" })).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Share" }),
+    ).not.toBeInTheDocument();
   });
 
   it("renders Export button when hasExport is true", () => {
diff --git a/tests/components/HeaderLockup.test.tsx b/tests/components/HeaderLockup.test.tsx
index 53129e6..6357a78 100644
--- a/tests/components/HeaderLockup.test.tsx
+++ b/tests/components/HeaderLockup.test.tsx
@@ -45,9 +45,7 @@ describe("HeaderLockup (behavioral tests)", () => {
   });
 
   it("renders description when provided", () => {
-    render(
-      <HeaderLockup title="Test Title" description="Test description" />,
-    );
+    render(<HeaderLockup title="Test Title" description="Test description" />);
     expect(screen.getByText("Test description")).toBeInTheDocument();
   });
 
@@ -71,13 +69,7 @@ describe("HeaderLockup (behavioral tests)", () => {
   });
 
   it("accepts PascalCase props", () => {
-    render(
-      <HeaderLockup
-        title="Test Title"
-        justification="Left"
-        size="L"
-      />,
-    );
+    render(<HeaderLockup title="Test Title" justification="Left" size="L" />);
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
   });
 });
diff --git a/tests/components/Logo.test.tsx b/tests/components/Logo.test.tsx
index ef846d0..ad6fde4 100644
--- a/tests/components/Logo.test.tsx
+++ b/tests/components/Logo.test.tsx
@@ -47,7 +47,7 @@ describe("Logo (behavioral tests)", () => {
 
   it("hides text when showText is false", () => {
     const { container } = render(<Logo showText={false} />);
-    const textElement = container.querySelector('.hidden');
+    const textElement = container.querySelector(".hidden");
     expect(textElement).toBeInTheDocument();
     expect(screen.getByAltText("CommunityRule Logo Icon")).toBeInTheDocument();
   });
diff --git a/tests/components/MultiSelect.test.tsx b/tests/components/MultiSelect.test.tsx
index 2a22186..1f2b376 100644
--- a/tests/components/MultiSelect.test.tsx
+++ b/tests/components/MultiSelect.test.tsx
@@ -135,13 +135,10 @@ describe("MultiSelect – behaviour specifics", () => {
   });
 
   it("does not render add button when addButton is false", () => {
-    render(
-      <MultiSelect
-        options={defaultChipOptions}
-        addButton={false}
-      />,
-    );
-    expect(screen.queryByRole("button", { name: /add/i })).not.toBeInTheDocument();
+    render(<MultiSelect options={defaultChipOptions} addButton={false} />);
+    expect(
+      screen.queryByRole("button", { name: /add/i }),
+    ).not.toBeInTheDocument();
   });
 
   it("handles custom chip confirm", async () => {
@@ -163,7 +160,7 @@ describe("MultiSelect – behaviour specifics", () => {
     // Now the check button should be enabled
     const checkButton = screen.getByRole("button", { name: "Confirm" });
     expect(checkButton).not.toBeDisabled();
-    
+
     await userEvent.click(checkButton);
 
     expect(handleConfirm).toHaveBeenCalledWith("custom-1", "NewOption");
@@ -175,10 +172,7 @@ describe("MultiSelect – behaviour specifics", () => {
       { id: "custom-1", label: "", state: "Custom" as const },
     ];
     render(
-      <MultiSelect
-        options={customOptions}
-        onCustomChipClose={handleClose}
-      />,
+      <MultiSelect options={customOptions} onCustomChipClose={handleClose} />,
     );
 
     const closeButton = screen.getByRole("button", { name: "Close" });
diff --git a/tests/components/RelatedArticles.test.tsx b/tests/components/RelatedArticles.test.tsx
index 8b8ecb4..aa78d8b 100644
--- a/tests/components/RelatedArticles.test.tsx
+++ b/tests/components/RelatedArticles.test.tsx
@@ -5,7 +5,15 @@ import RelatedArticles from "../../app/components/sections/RelatedArticles";
 import type { BlogPost } from "../../lib/content";
 
 vi.mock("next/link", () => ({
-  default: ({ children, href, ...props }: any) => (
+  default: ({
+    children,
+    href,
+    ...props
+  }: {
+    children?: React.ReactNode;
+    href?: string;
+    [key: string]: unknown;
+  }) => (
     <a href={href} {...props}>
       {children}
     </a>
diff --git a/tests/components/ReviewPage.test.tsx b/tests/components/ReviewPage.test.tsx
index f902024..c35c5ea 100644
--- a/tests/components/ReviewPage.test.tsx
+++ b/tests/components/ReviewPage.test.tsx
@@ -13,7 +13,9 @@ describe("ReviewPage", () => {
   it("renders HeaderLockup with expected title", () => {
     render(<ReviewPage />);
     expect(
-      screen.getByRole("heading", { name: "Your community is added - congrats!" }),
+      screen.getByRole("heading", {
+        name: "Your community is added - congrats!",
+      }),
     ).toBeInTheDocument();
   });
 
@@ -44,6 +46,8 @@ describe("ReviewPage", () => {
     render(<ReviewPage />);
     const buttons = screen.getAllByRole("button");
     expect(buttons.length).toBeGreaterThanOrEqual(1);
-    expect(buttons.some((el) => el.textContent?.includes("Mutual Aid Mondays"))).toBe(true);
+    expect(
+      buttons.some((el) => el.textContent?.includes("Mutual Aid Mondays")),
+    ).toBe(true);
   });
 });
diff --git a/tests/components/TextInput.test.tsx b/tests/components/TextInput.test.tsx
index ae2b1a2..a565f36 100644
--- a/tests/components/TextInput.test.tsx
+++ b/tests/components/TextInput.test.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import "@testing-library/jest-dom/vitest";
 import TextInput from "../../app/components/controls/TextInput";
 import { componentTestSuite } from "../utils/componentTestSuite";
@@ -34,9 +34,7 @@ componentTestSuite<TextInputProps>({
 
 describe("TextInput (size tests)", () => {
   it("renders with medium size by default", () => {
-    const { container } = render(
-      <TextInput label="Test" inputSize="medium" />,
-    );
+    const { container } = render(<TextInput label="Test" inputSize="medium" />);
     const input = container.querySelector("input");
     expect(input).toHaveClass("h-[40px]");
   });
diff --git a/tests/components/Upload.test.tsx b/tests/components/Upload.test.tsx
index e146d13..dbe342a 100644
--- a/tests/components/Upload.test.tsx
+++ b/tests/components/Upload.test.tsx
@@ -33,13 +33,17 @@ describe("Upload (behavioral tests)", () => {
   it("renders with active state by default", () => {
     render(<Upload label="Upload" />);
     const button = screen.getByRole("button", { name: /upload/i });
-    expect(button).toHaveClass("bg-[var(--color-surface-invert-primary,white)]");
+    expect(button).toHaveClass(
+      "bg-[var(--color-surface-invert-primary,white)]",
+    );
   });
 
   it("renders with inactive state when active is false", () => {
     render(<Upload label="Upload" active={false} />);
     const button = screen.getByRole("button", { name: /upload/i });
-    expect(button).toHaveClass("bg-[var(--color-surface-default-secondary,#141414)]");
+    expect(button).toHaveClass(
+      "bg-[var(--color-surface-default-secondary,#141414)]",
+    );
   });
 
   it("displays label when provided", () => {
@@ -76,20 +80,30 @@ describe("Upload (behavioral tests)", () => {
 
   it("displays description text", () => {
     render(<Upload label="Upload" />);
-    expect(screen.getByText(/Add images, PDFs, and other files to the policy/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/Add images, PDFs, and other files to the policy/i),
+    ).toBeInTheDocument();
   });
 
   it("applies active state styles correctly", () => {
     render(<Upload label="Upload" active={true} />);
-    const descriptionText = screen.getByText(/Add images, PDFs, and other files to the policy/i);
+    const descriptionText = screen.getByText(
+      /Add images, PDFs, and other files to the policy/i,
+    );
     const descriptionContainer = descriptionText.parentElement;
-    expect(descriptionContainer).toHaveClass("text-[color:var(--color-content-default-primary,white)]");
+    expect(descriptionContainer).toHaveClass(
+      "text-[color:var(--color-content-default-primary,white)]",
+    );
   });
 
   it("applies inactive state styles correctly", () => {
     render(<Upload label="Upload" active={false} />);
-    const descriptionText = screen.getByText(/Add images, PDFs, and other files to the policy/i);
+    const descriptionText = screen.getByText(
+      /Add images, PDFs, and other files to the policy/i,
+    );
     const descriptionContainer = descriptionText.parentElement;
-    expect(descriptionContainer).toHaveClass("text-[color:var(--color-content-default-tertiary,#b4b4b4)]");
+    expect(descriptionContainer).toHaveClass(
+      "text-[color:var(--color-content-default-tertiary,#b4b4b4)]",
+    );
   });
 });
diff --git a/tests/e2e/performance.spec.ts b/tests/e2e/performance.spec.ts
index 15a1a5a..8917873 100644
--- a/tests/e2e/performance.spec.ts
+++ b/tests/e2e/performance.spec.ts
@@ -74,7 +74,11 @@ test.describe("Performance Monitoring", () => {
             const metrics: { lcp?: number; fid?: number; cls?: number } = {};
 
             for (const entry of entries) {
-              const e = entry as any;
+              const e = entry as PerformanceEntry & {
+                startTime?: number;
+                processingStart?: number;
+                value?: number;
+              };
               if (
                 e.name === "LCP" ||
                 e.entryType === "largest-contentful-paint"
diff --git a/tests/e2e/visual-regression.spec.ts b/tests/e2e/visual-regression.spec.ts
index eb79c20..758eb53 100644
--- a/tests/e2e/visual-regression.spec.ts
+++ b/tests/e2e/visual-regression.spec.ts
@@ -1,7 +1,7 @@
-import { test, expect } from "@playwright/test";
+import { test, expect, type Page } from "@playwright/test";
 
 test.describe("Visual Regression Tests", () => {
-  async function settle(page: any) {
+  async function settle(page: Page) {
     await page.evaluate(() => {
       window.scrollTo(0, window.scrollY); // ensure a frame boundary
       void document.body.getBoundingClientRect();
diff --git a/tests/pages/cards.test.jsx b/tests/pages/cards.test.jsx
index 995dbd9..03bc636 100644
--- a/tests/pages/cards.test.jsx
+++ b/tests/pages/cards.test.jsx
@@ -32,7 +32,9 @@ describe("Create flow cards page", () => {
     render(<CardsPage />);
 
     expect(
-      screen.getByText("How should this community communicate with each-other?"),
+      screen.getByText(
+        "How should this community communicate with each-other?",
+      ),
     ).toBeInTheDocument();
   });
 
@@ -58,7 +60,9 @@ describe("Create flow cards page", () => {
     });
     await user.click(toggle);
 
-    expect(screen.getByRole("button", { name: "Show less" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Show less" }),
+    ).toBeInTheDocument();
     expect(
       screen.getByText(
         "What method should this community use to communicate with eachother?",
diff --git a/tests/pages/right-rail.test.jsx b/tests/pages/right-rail.test.jsx
new file mode 100644
index 0000000..cea21f1
--- /dev/null
+++ b/tests/pages/right-rail.test.jsx
@@ -0,0 +1,145 @@
+import {
+  renderWithProviders as render,
+  screen,
+  cleanup,
+  within,
+} from "../utils/test-utils";
+import userEvent from "@testing-library/user-event";
+import { describe, test, expect, afterEach } from "vitest";
+import RightRailPage from "../../app/create/right-rail/page";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("Create flow right-rail page", () => {
+  test("renders without error", () => {
+    render(<RightRailPage />);
+
+    expect(
+      screen.getByRole("heading", {
+        name: "How should conflicts be resolved?",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  test("renders sidebar description with add link", () => {
+    render(<RightRailPage />);
+
+    const description = screen.getByText((content, element) => {
+      if (element?.tagName !== "P") return false;
+      const text = element.textContent ?? "";
+      return (
+        text.includes("You can also combine or") &&
+        text.includes("add") &&
+        text.includes("new approaches to the list")
+      );
+    });
+    expect(description).toBeInTheDocument();
+  });
+
+  test("renders message box with title and checkboxes", () => {
+    render(<RightRailPage />);
+
+    const region = screen.getByRole("region", {
+      name: "Consider defining approaches to steward key resources:",
+    });
+    expect(region).toBeInTheDocument();
+
+    expect(
+      within(region).getByRole("checkbox", {
+        name: "Amend your CommunityRule",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      within(region).getByRole("checkbox", { name: "Steward finances" }),
+    ).toBeInTheDocument();
+    expect(
+      within(region).getByRole("checkbox", { name: "Project level decisions" }),
+    ).toBeInTheDocument();
+    expect(
+      within(region).getByRole("checkbox", {
+        name: "Discipline and member termination",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  test("renders card stack with See all decision approaches toggle", () => {
+    render(<RightRailPage />);
+
+    expect(
+      screen.getByRole("button", { name: "See all decision approaches" }),
+    ).toBeInTheDocument();
+  });
+
+  test("renders recommended approach cards", () => {
+    render(<RightRailPage />);
+
+    expect(
+      screen.getByRole("button", {
+        name: /Mediation: Collaborative work to reach a resolution/,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", {
+        name: /Facilitated dialogue: Structured sessions/,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", {
+        name: /Invite-only: Private discussions with selected participants/,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  test("toggle expands and shows Show less", async () => {
+    const user = userEvent.setup();
+    render(<RightRailPage />);
+
+    const toggle = screen.getByRole("button", {
+      name: "See all decision approaches",
+    });
+    await user.click(toggle);
+
+    expect(
+      screen.getByRole("button", { name: "Show less" }),
+    ).toBeInTheDocument();
+  });
+
+  test("expanded view shows Label cards", async () => {
+    const user = userEvent.setup();
+    render(<RightRailPage />);
+
+    const toggle = screen.getByRole("button", {
+      name: "See all decision approaches",
+    });
+    await user.click(toggle);
+
+    const labelButtons = screen.getAllByRole("button", { name: /^Label/ });
+    expect(labelButtons.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test("clicking a card toggles selection", async () => {
+    const user = userEvent.setup();
+    render(<RightRailPage />);
+
+    const mediationCard = screen.getByRole("button", {
+      name: /Mediation: Collaborative work to reach a resolution/,
+    });
+    await user.click(mediationCard);
+
+    expect(screen.getByText("SELECTED")).toBeInTheDocument();
+  });
+
+  test("message box checkboxes are interactive", async () => {
+    const user = userEvent.setup();
+    render(<RightRailPage />);
+
+    const amendCheckbox = screen.getByRole("checkbox", {
+      name: "Amend your CommunityRule",
+    });
+    expect(amendCheckbox).not.toBeChecked();
+    await user.click(amendCheckbox);
+    expect(amendCheckbox).toBeChecked();
+  });
+});
diff --git a/tests/pages/user-journey.test.jsx b/tests/pages/user-journey.test.jsx
index 1a3840a..31be9bf 100644
--- a/tests/pages/user-journey.test.jsx
+++ b/tests/pages/user-journey.test.jsx
@@ -15,10 +15,8 @@ vi.mock("next/dynamic", () => {
     default: (importFn, options) => {
       // In tests, resolve the dynamic import immediately and return the component
       let Component = null;
-      let resolved = false;
       importFn().then((mod) => {
         Component = mod.default || mod;
-        resolved = true;
       });
       // Return a synchronous wrapper that uses the mocked component
       return (props) => {
@@ -261,10 +259,12 @@ describe("User Journey Integration", () => {
         },
         { timeout: 3000 },
       );
-    } catch (error) {
+    } catch {
       // Dynamic import may not resolve in test environment - this is a known limitation
       // The component functionality is tested in RuleStack.test.jsx
-      console.warn("Dynamic import for RuleStack did not resolve in test environment");
+      console.warn(
+        "Dynamic import for RuleStack did not resolve in test environment",
+      );
     }
 
     // 4. User sees features and benefits - wait for dynamically imported component
diff --git a/tests/unit/Card.test.jsx b/tests/unit/Card.test.jsx
index ed7fb30..a3f7421 100644
--- a/tests/unit/Card.test.jsx
+++ b/tests/unit/Card.test.jsx
@@ -89,10 +89,7 @@ describe("Card Component", () => {
     render(<Card {...defaultProps} />);
 
     const card = screen.getByRole("button");
-    expect(card).toHaveAttribute(
-      "aria-label",
-      "Label: Support text here",
-    );
+    expect(card).toHaveAttribute("aria-label", "Label: Support text here");
     expect(card).toHaveAttribute("tabIndex", "0");
   });
 
@@ -100,6 +97,9 @@ describe("Card Component", () => {
     render(<Card label="Label only" orientation="horizontal" />);
 
     expect(screen.getByText("Label only")).toBeInTheDocument();
-    expect(screen.getByRole("button")).toHaveAttribute("aria-label", "Label only");
+    expect(screen.getByRole("button")).toHaveAttribute(
+      "aria-label",
+      "Label only",
+    );
   });
 });
diff --git a/tests/unit/CardStack.test.jsx b/tests/unit/CardStack.test.jsx
index f992f53..5c56628 100644
--- a/tests/unit/CardStack.test.jsx
+++ b/tests/unit/CardStack.test.jsx
@@ -9,9 +9,24 @@ import { vi, describe, test, expect, afterEach } from "vitest";
 import CardStack from "../../app/components/utility/CardStack";
 
 const SAMPLE_CARDS = [
-  { id: "1", label: "Option A", supportText: "Description A", recommended: true },
-  { id: "2", label: "Option B", supportText: "Description B", recommended: false },
-  { id: "3", label: "Option C", supportText: "Description C", recommended: true },
+  {
+    id: "1",
+    label: "Option A",
+    supportText: "Description A",
+    recommended: true,
+  },
+  {
+    id: "2",
+    label: "Option B",
+    supportText: "Description B",
+    recommended: false,
+  },
+  {
+    id: "3",
+    label: "Option C",
+    supportText: "Description C",
+    recommended: true,
+  },
 ];
 
 afterEach(() => {
@@ -62,7 +77,9 @@ describe("CardStack Component", () => {
     render(<CardStack cards={SAMPLE_CARDS} hasMore={false} />);
 
     expect(
-      screen.queryByRole("button", { name: "See all communication approaches" }),
+      screen.queryByRole("button", {
+        name: "See all communication approaches",
+      }),
     ).not.toBeInTheDocument();
   });
 
@@ -82,9 +99,7 @@ describe("CardStack Component", () => {
 
   test("calls onCardSelect when a card is clicked", () => {
     const onCardSelect = vi.fn();
-    render(
-      <CardStack cards={SAMPLE_CARDS} onCardSelect={onCardSelect} />,
-    );
+    render(<CardStack cards={SAMPLE_CARDS} onCardSelect={onCardSelect} />);
 
     const cardButtons = screen.getAllByRole("button", {
       name: "Option A: Description A",
diff --git a/tests/unit/NumberCard.test.jsx b/tests/unit/NumberCard.test.jsx
index d47e604..20d4bb7 100644
--- a/tests/unit/NumberCard.test.jsx
+++ b/tests/unit/NumberCard.test.jsx
@@ -39,7 +39,16 @@ describe("NumberCard Component", () => {
     const card = screen
       .getByText("Test Card Text")
       .closest("div").parentElement;
-    expect(card).toHaveClass("flex", "flex-col", "sm:flex-row", "sm:items-center", "lg:flex-col", "lg:items-start", "lg:justify-end", "lg:relative");
+    expect(card).toHaveClass(
+      "flex",
+      "flex-col",
+      "sm:flex-row",
+      "sm:items-center",
+      "lg:flex-col",
+      "lg:items-start",
+      "lg:justify-end",
+      "lg:relative",
+    );
   });
 
   it("applies proper responsive spacing when size is not specified", () => {
@@ -194,9 +203,7 @@ describe("NumberCard Component", () => {
     render(<NumberCard {...defaultProps} size="Small" />);
 
     // For Small size, text is directly in card div (no wrapper), so use closest("div")
-    const card = screen
-      .getByText("Test Card Text")
-      .closest("div");
+    const card = screen.getByText("Test Card Text").closest("div");
     expect(card).toHaveClass(
       "flex",
       "flex-col",
diff --git a/tests/unit/RuleCard.test.jsx b/tests/unit/RuleCard.test.jsx
index 6bb0bcf..5f1c29f 100644
--- a/tests/unit/RuleCard.test.jsx
+++ b/tests/unit/RuleCard.test.jsx
@@ -148,7 +148,9 @@ describe("RuleCard Component", () => {
 
     const heading = screen.getByRole("heading", { level: 3 });
     // Check for responsive font classes - at 1440px+ it should have font-bricolage-grotesque and font-extrabold
-    expect(heading?.className).toMatch(/min-\[1440px\]:font-bricolage-grotesque/);
+    expect(heading?.className).toMatch(
+      /min-\[1440px\]:font-bricolage-grotesque/,
+    );
     expect(heading?.className).toMatch(/min-\[1440px\]:font-extrabold/);
   });
 
@@ -162,11 +164,7 @@ describe("RuleCard Component", () => {
       },
     ];
     render(
-      <RuleCard
-        {...defaultProps}
-        expanded={true}
-        categories={categories}
-      />,
+      <RuleCard {...defaultProps} expanded={true} categories={categories} />,
     );
 
     expect(screen.getByText("Values")).toBeInTheDocument();
@@ -186,12 +184,7 @@ describe("RuleCard Component", () => {
   });
 
   it("renders with community initials fallback", () => {
-    render(
-      <RuleCard
-        {...defaultProps}
-        communityInitials="CE"
-      />,
-    );
+    render(<RuleCard {...defaultProps} communityInitials="CE" />);
 
     expect(screen.getByText("CE")).toBeInTheDocument();
   });
diff --git a/tests/unit/RuleStack.test.jsx b/tests/unit/RuleStack.test.jsx
index dcc773e..216ba06 100644
--- a/tests/unit/RuleStack.test.jsx
+++ b/tests/unit/RuleStack.test.jsx
@@ -147,8 +147,12 @@ describe("RuleStack Component", () => {
       "/assets/Icon_Sociocracy.svg",
     );
     // Check for responsive icon size classes
-    expect(sociocracyIcon?.className).toMatch(/min-\[640px\]:max-\[1023px\]:w-\[56px\]/);
-    expect(sociocracyIcon?.className).toMatch(/min-\[640px\]:max-\[1023px\]:h-\[56px\]/);
+    expect(sociocracyIcon?.className).toMatch(
+      /min-\[640px\]:max-\[1023px\]:w-\[56px\]/,
+    );
+    expect(sociocracyIcon?.className).toMatch(
+      /min-\[640px\]:max-\[1023px\]:h-\[56px\]/,
+    );
     expect(sociocracyIcon?.className).toMatch(/min-\[1440px\]:w-\[90px\]/);
     expect(sociocracyIcon?.className).toMatch(/min-\[1440px\]:h-\[90px\]/);
   });
diff --git a/vitest.setup.ts b/vitest.setup.ts
index b5a70ab..6b22350 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,4 +1,5 @@
 import "@testing-library/jest-dom/vitest";
+import type React from "react";
 import { afterAll, afterEach, beforeAll, vi } from "vitest";
 import { cleanup } from "@testing-library/react";
 import { server } from "./tests/msw/server";
@@ -11,15 +12,19 @@ import { server } from "./tests/msw/server";
 vi.mock("next/dynamic", () => {
   const React = require("react");
   return {
-    default: (importFn: () => Promise<any>, options?: any) => {
+    default: (
+      importFn: () => Promise<{ default?: React.ComponentType }>,
+      options?: { loading?: () => React.ReactNode },
+    ) => {
       // In tests, return a component that immediately resolves and renders
-      return function DynamicComponent(props: any) {
-        const [Component, setComponent] = React.useState(null);
+      return function DynamicComponent(props: Record<string, unknown>) {
+        const [Component, setComponent] =
+          React.useState<React.ComponentType | null>(null);
         const [loading, setLoading] = React.useState(true);
 
         React.useEffect(() => {
           importFn()
-            .then((mod: any) => {
+            .then((mod: { default?: React.ComponentType }) => {
               setComponent(mod.default || mod);
               setLoading(false);
             })