diff --git a/.gitea/workflows/ci.yaml b/.gitea/workflows/ci.yaml
index 1d3ff2e..5ac471f 100644
--- a/.gitea/workflows/ci.yaml
+++ b/.gitea/workflows/ci.yaml
@@ -2,10 +2,12 @@ name: CI Pipeline
 run-name: "${{ gitea.actor }} triggered CI pipeline"
 
 on:
-  workflow_dispatch: {}
-  pull_request:
-    branches: [main]
-    types: [opened, reopened, synchronize]
+  workflow_dispatch: {}  # Manual trigger only - run tests locally before merging
+  # Auto-runs disabled for solo development
+  # Re-enable when ready for collaborators:
+  # pull_request:
+  #   branches: [main]
+  #   types: [opened, reopened, synchronize]
 
 env:
   NODE_VERSION: "20"
diff --git a/app/components/AskOrganizer.tsx b/app/components/AskOrganizer.tsx
deleted file mode 100644
index 4b61b5a..0000000
--- a/app/components/AskOrganizer.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import ContentLockup from "./ContentLockup";
-import Button from "./Button";
-import { useAnalytics } from "../hooks";
-
-interface AskOrganizerProps {
-  title?: string;
-  subtitle?: string;
-  description?: string;
-  buttonText?: string;
-  buttonHref?: string;
-  className?: string;
-  variant?: "centered" | "left-aligned" | "compact" | "inverse";
-  onContactClick?: (_data: {
-    event: string;
-    component: string;
-    variant: string;
-    buttonText: string;
-    buttonHref: string;
-    timestamp: string;
-  }) => void;
-}
-
-const AskOrganizer = memo<AskOrganizerProps>(
-  ({
-    title,
-    subtitle,
-    description,
-    buttonText = "Ask an organizer",
-    buttonHref = "#",
-    className = "",
-    variant = "centered",
-    onContactClick,
-  }) => {
-    const { trackEvent, trackCustomEvent } = useAnalytics();
-
-    // Analytics tracking for contact button clicks
-    const handleContactClick = (
-      _event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
-    ) => {
-      // Track with standard analytics
-      trackEvent({
-        event: "contact_button_click",
-        category: "engagement",
-        label: "ask_organizer",
-        component: "AskOrganizer",
-        variant,
-      });
-
-      // Also call custom callback if provided
-      trackCustomEvent(
-        "contact_button_click",
-        {
-          component: "AskOrganizer",
-          variant,
-          buttonText,
-          buttonHref,
-        },
-        onContactClick,
-      );
-    };
-
-    // Variant-specific styling
-    const variantStyles: Record<
-      string,
-      { container: string; buttonContainer: string }
-    > = {
-      centered: {
-        container: "text-center",
-        buttonContainer: "flex justify-center",
-      },
-      "left-aligned": {
-        container: "text-left",
-        buttonContainer: "flex justify-start",
-      },
-      compact: {
-        container: "text-center",
-        buttonContainer: "flex justify-center",
-      },
-      inverse: {
-        container: "text-center",
-        buttonContainer: "flex justify-center",
-      },
-    };
-
-    const styles = variantStyles[variant] || variantStyles.centered;
-
-    // Section padding based on variant
-    const sectionPadding =
-      variant === "compact"
-        ? "py-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] md:py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-032)]"
-        : "py-[var(--spacing-scale-032)] px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-096)] md:px-[var(--spacing-scale-064)]";
-
-    // Gap between content and button based on variant
-    const contentGap =
-      variant === "compact"
-        ? "gap-[var(--spacing-scale-020)]"
-        : "gap-[var(--spacing-scale-040)]";
-
-    const labelledBy = title ? "ask-organizer-headline" : undefined;
-
-    return (
-      <section
-        className={`${sectionPadding} ${className}`}
-        aria-labelledby={labelledBy}
-        aria-label={labelledBy ? undefined : "Ask an organizer"}
-        tabIndex={-1}
-      >
-        <div className={`flex flex-col ${contentGap} ${styles.container}`}>
-          {/* Content Lockup */}
-          <ContentLockup
-            title={title}
-            subtitle={subtitle}
-            description={description}
-            variant={variant === "inverse" ? "ask-inverse" : "ask"}
-            alignment={variant === "left-aligned" ? "left" : "center"}
-            titleId={labelledBy}
-          />
-
-          {/* Button */}
-          <div className={styles.buttonContainer}>
-            <Button
-              href={buttonHref}
-              size="large"
-              variant={variant === "inverse" ? "primary" : "default"}
-              className="xl:!px-[var(--spacing-scale-020)] xl:!py-[var(--spacing-scale-012)] xl:!text-[24px] xl:!leading-[28px]"
-              onClick={handleContactClick}
-              ariaLabel={`${buttonText} - Contact an organizer for help`}
-            >
-              {buttonText}
-            </Button>
-          </div>
-        </div>
-      </section>
-    );
-  },
-);
-
-AskOrganizer.displayName = "AskOrganizer";
-
-export default AskOrganizer;
diff --git a/app/components/AskOrganizer/AskOrganizer.container.tsx b/app/components/AskOrganizer/AskOrganizer.container.tsx
new file mode 100644
index 0000000..6614bac
--- /dev/null
+++ b/app/components/AskOrganizer/AskOrganizer.container.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { memo } from "react";
+import { useAnalytics } from "../../hooks";
+import AskOrganizerView from "./AskOrganizer.view";
+import type {
+  AskOrganizerProps,
+  AskOrganizerVariant,
+} from "./AskOrganizer.types";
+
+const VARIANT_STYLES: Record<
+  AskOrganizerVariant,
+  { container: string; buttonContainer: string }
+> = {
+  centered: {
+    container: "text-center",
+    buttonContainer: "flex justify-center",
+  },
+  "left-aligned": {
+    container: "text-left",
+    buttonContainer: "flex justify-start",
+  },
+  compact: {
+    container: "text-center",
+    buttonContainer: "flex justify-center",
+  },
+  inverse: {
+    container: "text-center",
+    buttonContainer: "flex justify-center",
+  },
+};
+
+const AskOrganizerContainer = memo<AskOrganizerProps>(
+  ({
+    title,
+    subtitle,
+    description,
+    buttonText = "Ask an organizer",
+    buttonHref = "#",
+    className = "",
+    variant = "centered",
+    onContactClick,
+  }) => {
+    const { trackEvent, trackCustomEvent } = useAnalytics();
+
+    const resolvedVariant: AskOrganizerVariant = variant ?? "centered";
+    const styles = VARIANT_STYLES[resolvedVariant] ?? VARIANT_STYLES.centered;
+
+    const sectionPadding =
+      resolvedVariant === "compact"
+        ? "py-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] md:py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-032)]"
+        : "py-[var(--spacing-scale-032)] px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-096)] md:px-[var(--spacing-scale-064)]";
+
+    const contentGap =
+      resolvedVariant === "compact"
+        ? "gap-[var(--spacing-scale-020)]"
+        : "gap-[var(--spacing-scale-040)]";
+
+    const labelledBy = title ? "ask-organizer-headline" : undefined;
+
+    const handleContactClick = (
+      event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
+    ) => {
+      trackEvent({
+        event: "contact_button_click",
+        category: "engagement",
+        label: "ask_organizer",
+        component: "AskOrganizer",
+        variant: resolvedVariant,
+      });
+
+      trackCustomEvent(
+        "contact_button_click",
+        {
+          component: "AskOrganizer",
+          variant: resolvedVariant,
+          buttonText,
+          buttonHref,
+        },
+        onContactClick as
+          | ((_data: Record<string, unknown>) => void)
+          | undefined,
+      );
+
+      // Preserve existing button behavior (no preventDefault here)
+      // while still tracking analytics.
+      return event;
+    };
+
+    return (
+      <AskOrganizerView
+        title={title}
+        subtitle={subtitle}
+        description={description}
+        buttonText={buttonText}
+        buttonHref={buttonHref}
+        className={className}
+        sectionPadding={sectionPadding}
+        contentGap={`${contentGap} ${styles.container}`}
+        buttonContainerClass={styles.buttonContainer}
+        variant={resolvedVariant}
+        labelledBy={labelledBy}
+        onContactClick={handleContactClick}
+      />
+    );
+  },
+);
+
+AskOrganizerContainer.displayName = "AskOrganizer";
+
+export default AskOrganizerContainer;
diff --git a/app/components/AskOrganizer/AskOrganizer.types.ts b/app/components/AskOrganizer/AskOrganizer.types.ts
new file mode 100644
index 0000000..e7bd031
--- /dev/null
+++ b/app/components/AskOrganizer/AskOrganizer.types.ts
@@ -0,0 +1,42 @@
+import type React from "react";
+
+export type AskOrganizerVariant =
+  | "centered"
+  | "left-aligned"
+  | "compact"
+  | "inverse";
+
+export interface AskOrganizerProps {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  buttonText?: string;
+  buttonHref?: string;
+  className?: string;
+  variant?: AskOrganizerVariant;
+  onContactClick?: (_data: {
+    event: string;
+    component: string;
+    variant: string;
+    buttonText: string;
+    buttonHref: string;
+    timestamp: string;
+  }) => void;
+}
+
+export interface AskOrganizerViewProps {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  buttonText: string;
+  buttonHref: string;
+  className: string;
+  sectionPadding: string;
+  contentGap: string;
+  buttonContainerClass: string;
+  variant: AskOrganizerVariant;
+  labelledBy?: string;
+  onContactClick: (
+    _event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
+  ) => void;
+}
diff --git a/app/components/AskOrganizer/AskOrganizer.view.tsx b/app/components/AskOrganizer/AskOrganizer.view.tsx
new file mode 100644
index 0000000..c16d816
--- /dev/null
+++ b/app/components/AskOrganizer/AskOrganizer.view.tsx
@@ -0,0 +1,55 @@
+import ContentLockup from "../ContentLockup";
+import Button from "../Button";
+import type { AskOrganizerViewProps } from "./AskOrganizer.types";
+
+function AskOrganizerView({
+  title,
+  subtitle,
+  description,
+  buttonText,
+  buttonHref,
+  className,
+  sectionPadding,
+  contentGap,
+  buttonContainerClass,
+  variant,
+  labelledBy,
+  onContactClick,
+}: AskOrganizerViewProps) {
+  return (
+    <section
+      className={`${sectionPadding} ${className}`}
+      aria-labelledby={labelledBy}
+      aria-label={labelledBy ? undefined : "Ask an organizer"}
+      tabIndex={-1}
+    >
+      <div className={`flex flex-col ${contentGap}`}>
+        {/* Content Lockup */}
+        <ContentLockup
+          title={title}
+          subtitle={subtitle}
+          description={description}
+          variant={variant === "inverse" ? "ask-inverse" : "ask"}
+          alignment={variant === "left-aligned" ? "left" : "center"}
+          titleId={labelledBy}
+        />
+
+        {/* Button */}
+        <div className={buttonContainerClass}>
+          <Button
+            href={buttonHref}
+            size="large"
+            variant={variant === "inverse" ? "primary" : "default"}
+            className="xl:!px-[var(--spacing-scale-020)] xl:!py-[var(--spacing-scale-012)] xl:!text-[24px] xl:!leading-[28px]"
+            onClick={onContactClick}
+            ariaLabel={`${buttonText} - Contact an organizer for help`}
+          >
+            {buttonText}
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default AskOrganizerView;
diff --git a/app/components/AskOrganizer/index.tsx b/app/components/AskOrganizer/index.tsx
new file mode 100644
index 0000000..49e4669
--- /dev/null
+++ b/app/components/AskOrganizer/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./AskOrganizer.container";
+export * from "./AskOrganizer.types";
diff --git a/app/components/Checkbox.tsx b/app/components/Checkbox/Checkbox.container.tsx
similarity index 52%
rename from app/components/Checkbox.tsx
rename to app/components/Checkbox/Checkbox.container.tsx
index 97e8cd3..1961614 100644
--- a/app/components/Checkbox.tsx
+++ b/app/components/Checkbox/Checkbox.container.tsx
@@ -1,36 +1,15 @@
 "use client";
 
 import { memo } from "react";
-import { useComponentId } from "../hooks";
+import { useComponentId } from "../../hooks";
+import { CheckboxView } from "./Checkbox.view";
+import type { CheckboxProps } from "./Checkbox.types";
 
-interface CheckboxProps {
-  checked?: boolean;
-  mode?: "standard" | "inverse";
-  state?: "default" | "hover" | "focus";
-  disabled?: boolean;
-  label?: string;
-  className?: string;
-  onChange?: (_data: {
-    checked: boolean;
-    value?: string;
-    event: React.MouseEvent | React.KeyboardEvent;
-  }) => void;
-  id?: string;
-  name?: string;
-  value?: string;
-  ariaLabel?: string;
-}
-
-/**
- * Checkbox
- * A basic controlled checkbox with visual modes and interaction states.
- * This is a minimal first pass; visuals will be refined collaboratively.
- */
-const Checkbox = memo<CheckboxProps>(
+const CheckboxContainer = memo<CheckboxProps>(
   ({
     checked = false,
-    mode = "standard", // "standard" | "inverse"
-    state = "default", // "default" | "hover" | "focus"
+    mode = "standard",
+    state = "default",
     disabled = false,
     label,
     className = "",
@@ -109,72 +88,39 @@ const Checkbox = memo<CheckboxProps>(
       ...props,
     };
 
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        handleToggle(e);
+      }
+    };
+
     return (
-      <label
-        className={`inline-flex items-center gap-[8px] cursor-pointer select-none ${
-          disabled ? "opacity-60 cursor-not-allowed" : ""
-        } ${className}`}
-        onMouseDown={(e) => e.preventDefault()}
-      >
-        <span
-          {...accessibilityProps}
-          onClick={handleToggle}
-          onKeyDown={(e) => {
-            if (e.key === " " || e.key === "Enter") {
-              e.preventDefault();
-              handleToggle(e);
-            }
-          }}
-          className={`${combinedBoxStyles} ${defaultOutlineClass} ${conditionalHoverOutlineClass} ${conditionalFocusClass} p-[var(--measures-spacing-004)]`}
-          style={{
-            backgroundColor: backgroundWhenChecked,
-          }}
-        >
-          {/* Simple check glyph */}
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 12 12"
-            aria-hidden="true"
-            focusable="false"
-          >
-            <polyline
-              points="2.5 6 5 8.5 10 3.5"
-              stroke={checkGlyphColor}
-              strokeWidth="1.25"
-              fill="none"
-              strokeLinecap="square"
-              strokeLinejoin="miter"
-              vectorEffect="non-scaling-stroke"
-            />
-          </svg>
-        </span>
-        {label && (
-          <span
-            id={labelId}
-            className="font-inter text-[14px] leading-[18px]"
-            style={{ color: labelColor }}
-          >
-            {label}
-          </span>
-        )}
-        {/* Hidden native input for form compatibility (optional for now) */}
-        <input
-          type="checkbox"
-          name={name}
-          value={value}
-          checked={checked}
-          onChange={() => {}}
-          tabIndex={-1}
-          aria-hidden="true"
-          className="sr-only"
-          readOnly
-        />
-      </label>
+      <CheckboxView
+        labelId={labelId}
+        checked={checked}
+        mode={mode}
+        state={state}
+        disabled={disabled}
+        label={label}
+        name={name}
+        value={value}
+        className={className}
+        combinedBoxStyles={combinedBoxStyles}
+        defaultOutlineClass={defaultOutlineClass}
+        conditionalHoverOutlineClass={conditionalHoverOutlineClass}
+        conditionalFocusClass={conditionalFocusClass}
+        backgroundWhenChecked={backgroundWhenChecked}
+        checkGlyphColor={checkGlyphColor}
+        labelColor={labelColor}
+        accessibilityProps={accessibilityProps}
+        onToggle={handleToggle}
+        onKeyDown={handleKeyDown}
+      />
     );
   },
 );
 
-Checkbox.displayName = "Checkbox";
+CheckboxContainer.displayName = "Checkbox";
 
-export default Checkbox;
+export default CheckboxContainer;
diff --git a/app/components/Checkbox/Checkbox.types.ts b/app/components/Checkbox/Checkbox.types.ts
new file mode 100644
index 0000000..2a0d28d
--- /dev/null
+++ b/app/components/Checkbox/Checkbox.types.ts
@@ -0,0 +1,39 @@
+export interface CheckboxProps {
+  checked?: boolean;
+  mode?: "standard" | "inverse";
+  state?: "default" | "hover" | "focus";
+  disabled?: boolean;
+  label?: string;
+  className?: string;
+  onChange?: (_data: {
+    checked: boolean;
+    value?: string;
+    event: React.MouseEvent | React.KeyboardEvent;
+  }) => void;
+  id?: string;
+  name?: string;
+  value?: string;
+  ariaLabel?: string;
+}
+
+export interface CheckboxViewProps {
+  labelId: string;
+  checked: boolean;
+  mode: "standard" | "inverse";
+  state: "default" | "hover" | "focus";
+  disabled: boolean;
+  label?: string;
+  name?: string;
+  value?: string;
+  className: string;
+  combinedBoxStyles: string;
+  defaultOutlineClass: string;
+  conditionalHoverOutlineClass: string;
+  conditionalFocusClass: string;
+  backgroundWhenChecked: string;
+  checkGlyphColor: string;
+  labelColor: string;
+  accessibilityProps: React.HTMLAttributes<HTMLSpanElement>;
+  onToggle: (_e: React.MouseEvent | React.KeyboardEvent) => void;
+  onKeyDown: (_e: React.KeyboardEvent<HTMLSpanElement>) => void;
+}
diff --git a/app/components/Checkbox/Checkbox.view.tsx b/app/components/Checkbox/Checkbox.view.tsx
new file mode 100644
index 0000000..f4d4144
--- /dev/null
+++ b/app/components/Checkbox/Checkbox.view.tsx
@@ -0,0 +1,80 @@
+import type { CheckboxViewProps } from "./Checkbox.types";
+
+export function CheckboxView({
+  labelId,
+  checked,
+  disabled,
+  label,
+  name,
+  value,
+  className,
+  combinedBoxStyles,
+  defaultOutlineClass,
+  conditionalHoverOutlineClass,
+  conditionalFocusClass,
+  backgroundWhenChecked,
+  checkGlyphColor,
+  labelColor,
+  accessibilityProps,
+  onToggle,
+  onKeyDown,
+}: CheckboxViewProps) {
+  return (
+    <label
+      className={`inline-flex items-center gap-[8px] cursor-pointer select-none ${
+        disabled ? "opacity-60 cursor-not-allowed" : ""
+      } ${className}`}
+      onMouseDown={(e) => e.preventDefault()}
+    >
+      <span
+        {...accessibilityProps}
+        onClick={onToggle}
+        onKeyDown={onKeyDown}
+        className={`${combinedBoxStyles} ${defaultOutlineClass} ${conditionalHoverOutlineClass} ${conditionalFocusClass} p-[var(--measures-spacing-004)]`}
+        style={{
+          backgroundColor: backgroundWhenChecked,
+        }}
+      >
+        {/* Simple check glyph */}
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 12 12"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <polyline
+            points="2.5 6 5 8.5 10 3.5"
+            stroke={checkGlyphColor}
+            strokeWidth="1.25"
+            fill="none"
+            strokeLinecap="square"
+            strokeLinejoin="miter"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </span>
+      {label && (
+        <span
+          id={labelId}
+          className="font-inter text-[14px] leading-[18px]"
+          style={{ color: labelColor }}
+        >
+          {label}
+        </span>
+      )}
+      {/* Hidden native input for form compatibility (optional for now) */}
+      <input
+        type="checkbox"
+        name={name}
+        value={value}
+        checked={checked}
+        onChange={() => {}}
+        tabIndex={-1}
+        aria-hidden="true"
+        className="sr-only"
+        readOnly
+      />
+    </label>
+  );
+}
diff --git a/app/components/Checkbox/index.tsx b/app/components/Checkbox/index.tsx
new file mode 100644
index 0000000..d90c09b
--- /dev/null
+++ b/app/components/Checkbox/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./Checkbox.container";
+export type { CheckboxProps } from "./Checkbox.types";
diff --git a/app/components/ConditionalHeader.tsx b/app/components/ConditionalHeader.tsx
deleted file mode 100644
index 875c1db..0000000
--- a/app/components/ConditionalHeader.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-"use client";
-
-import { usePathname } from "next/navigation";
-import Header from "./Header";
-import HomeHeader from "./HomeHeader";
-
-export default function ConditionalHeader() {
-  const pathname = usePathname();
-
-  // Show HomeHeader only on the homepage (/)
-  if (pathname === "/") {
-    return <HomeHeader />;
-  }
-
-  // Show regular Header on all other pages
-  return <Header />;
-}
diff --git a/app/components/ConditionalHeader/ConditionalHeader.container.tsx b/app/components/ConditionalHeader/ConditionalHeader.container.tsx
new file mode 100644
index 0000000..5f006f1
--- /dev/null
+++ b/app/components/ConditionalHeader/ConditionalHeader.container.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { memo } from "react";
+import { usePathname } from "next/navigation";
+import { ConditionalHeaderView } from "./ConditionalHeader.view";
+import type { ConditionalHeaderProps } from "./ConditionalHeader.types";
+
+const ConditionalHeaderContainer = memo<ConditionalHeaderProps>(() => {
+  const pathname = usePathname();
+  const isHomePage = pathname === "/";
+
+  return <ConditionalHeaderView isHomePage={isHomePage} />;
+});
+
+ConditionalHeaderContainer.displayName = "ConditionalHeader";
+
+export default ConditionalHeaderContainer;
diff --git a/app/components/ConditionalHeader/ConditionalHeader.types.ts b/app/components/ConditionalHeader/ConditionalHeader.types.ts
new file mode 100644
index 0000000..61af22a
--- /dev/null
+++ b/app/components/ConditionalHeader/ConditionalHeader.types.ts
@@ -0,0 +1,7 @@
+export interface ConditionalHeaderProps {
+  // Currently no props, but keeping interface for future extensibility
+}
+
+export interface ConditionalHeaderViewProps {
+  isHomePage: boolean;
+}
diff --git a/app/components/ConditionalHeader/ConditionalHeader.view.tsx b/app/components/ConditionalHeader/ConditionalHeader.view.tsx
new file mode 100644
index 0000000..ff36612
--- /dev/null
+++ b/app/components/ConditionalHeader/ConditionalHeader.view.tsx
@@ -0,0 +1,12 @@
+import HomeHeader from "../HomeHeader";
+import Header from "../Header";
+import type { ConditionalHeaderViewProps } from "./ConditionalHeader.types";
+
+export function ConditionalHeaderView({
+  isHomePage,
+}: ConditionalHeaderViewProps) {
+  if (isHomePage) {
+    return <HomeHeader />;
+  }
+  return <Header />;
+}
diff --git a/app/components/ConditionalHeader/index.tsx b/app/components/ConditionalHeader/index.tsx
new file mode 100644
index 0000000..a05fd67
--- /dev/null
+++ b/app/components/ConditionalHeader/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./ConditionalHeader.container";
+export type { ConditionalHeaderProps } from "./ConditionalHeader.types";
diff --git a/app/components/ContentContainer.tsx b/app/components/ContentContainer.tsx
deleted file mode 100644
index 97ce3ee..0000000
--- a/app/components/ContentContainer.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import { getAssetPath, ASSETS } from "../../lib/assetUtils";
-import type { BlogPost } from "../../lib/content";
-
-interface ContentContainerProps {
-  post: BlogPost;
-  width?: string;
-  size?: "xs" | "responsive";
-}
-
-const ContentContainer = memo<ContentContainerProps>(
-  ({ post, width = "200px", size = "responsive" }) => {
-    // Get the corresponding icon based on the same logic as background images
-    const getIconImage = (slug: string): string => {
-      const icons = [
-        getAssetPath(ASSETS.ICON_1),
-        getAssetPath(ASSETS.ICON_2),
-        getAssetPath(ASSETS.ICON_3),
-      ];
-
-      if (!slug) return icons[0];
-
-      // Use the same cycling logic as background images to ensure matching
-      const slugOrder = [
-        "building-community-trust",
-        "operational-security-mutual-aid",
-        "making-decisions-without-hierarchy",
-        "resolving-active-conflicts",
-      ];
-      const index = slugOrder.indexOf(slug);
-      const finalIndex = index >= 0 ? index % icons.length : 0;
-      return icons[finalIndex];
-    };
-
-    const iconImage = getIconImage(post.slug);
-
-    // Choose styling based on size prop
-    const containerClasses =
-      size === "xs"
-        ? "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)]"
-        : "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)] sm:gap-[var(--measures-spacing-016)] md:gap-[18px] lg:gap-[var(--measures-spacing-024)]";
-
-    return (
-      <div
-        className={`${containerClasses} ${
-          size === "responsive"
-            ? "max-w-[298px] sm:max-w-[479px] lg:max-w-[365px] xl:max-w-[623px]"
-            : ""
-        }`}
-        style={size === "responsive" ? {} : { width }}
-      >
-        {/* Content Container - gap between icon and text */}
-        <div
-          className={
-            size === "xs"
-              ? "flex flex-col gap-[var(--measures-spacing-008)]"
-              : "flex flex-col gap-[var(--measures-spacing-008)] sm:gap-[var(--measures-spacing-012)] md:gap-[var(--measures-spacing-008)] lg:gap-[var(--measures-spacing-016)] xl:gap-[var(--measures-spacing-004)]"
-          }
-        >
-          {/* Icon */}
-          <div className="w-[60px] h-[30px] flex items-center justify-center">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={iconImage}
-              alt={`Icon for ${post.frontmatter.title}`}
-              className="w-[60px] h-[30px] object-contain"
-            />
-          </div>
-
-          {/* Text Container */}
-          <div
-            className={
-              size === "xs"
-                ? "flex flex-col gap-[var(--measures-spacing-004)]"
-                : "flex flex-col gap-[var(--measures-spacing-004)] md:gap-[var(--measures-spacing-002)] lg:gap-[var(--measures-spacing-004)]"
-            }
-          >
-            {/* Title */}
-            <h3
-              className={
-                size === "xs"
-                  ? "font-bricolage font-medium text-[18px] leading-[120%] text-[var(--color-content-inverse-brand-royal)] group-hover:text-blue-200 transition-colors"
-                  : "font-bricolage font-medium text-[18px] leading-[120%] sm:text-[24px] sm:leading-[24px] md:text-[32px] md:leading-[110%] lg:text-[44px] lg:leading-[110%] xl:text-[64px] xl:leading-[110%] text-[var(--color-content-inverse-brand-royal)] group-hover:text-blue-200 transition-colors"
-              }
-            >
-              {post.frontmatter.title}
-            </h3>
-
-            {/* Description */}
-            <p
-              className={
-                size === "xs"
-                  ? "font-inter font-normal text-[12px] leading-[16px] text-[var(--color-content-inverse-brand-royal)] max-w-md"
-                  : "font-inter font-normal text-[12px] leading-[16px] sm:text-[14px] sm:leading-[20px] md:text-[14px] md:leading-[20px] lg:text-[18px] lg:leading-[130%] xl:text-[24px] xl:leading-[32px] text-[var(--color-content-inverse-brand-royal)]"
-              }
-            >
-              {post.frontmatter.description}
-            </p>
-          </div>
-        </div>
-
-        {/* Metadata Container - horizontal with 8px gap */}
-        <div className="flex items-center gap-[var(--measures-spacing-008)]">
-          {/* Author Name */}
-          <span
-            className={
-              size === "xs"
-                ? "font-inter font-normal text-[10px] leading-[14px] text-[var(--color-content-inverse-brand-royal)]"
-                : "font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] text-[var(--color-content-inverse-brand-royal)]"
-            }
-          >
-            {post.frontmatter.author}
-          </span>
-
-          {/* Date */}
-          <span
-            className={
-              size === "xs"
-                ? "font-inter font-normal text-[10px] leading-[14px] text-[var(--color-content-inverse-brand-royal)]"
-                : "font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] text-[var(--color-content-inverse-brand-royal)]"
-            }
-          >
-            {new Date(post.frontmatter.date).toLocaleDateString("en-US", {
-              year: "numeric",
-              month: "long",
-            })}
-          </span>
-        </div>
-      </div>
-    );
-  },
-);
-
-ContentContainer.displayName = "ContentContainer";
-
-export default ContentContainer;
diff --git a/app/components/ContentContainer/ContentContainer.container.tsx b/app/components/ContentContainer/ContentContainer.container.tsx
new file mode 100644
index 0000000..5c201b7
--- /dev/null
+++ b/app/components/ContentContainer/ContentContainer.container.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { memo } from "react";
+import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
+import ContentContainerView from "./ContentContainer.view";
+import type { ContentContainerProps } from "./ContentContainer.types";
+
+const ContentContainerContainer = memo<ContentContainerProps>(
+  ({ post, width = "200px", size = "responsive" }) => {
+    // Get the corresponding icon based on the same logic as background images
+    const getIconImage = (slug: string): string => {
+      const icons = [
+        getAssetPath(ASSETS.ICON_1),
+        getAssetPath(ASSETS.ICON_2),
+        getAssetPath(ASSETS.ICON_3),
+      ];
+
+      if (!slug) return icons[0];
+
+      // Use the same cycling logic as background images to ensure matching
+      const slugOrder = [
+        "building-community-trust",
+        "operational-security-mutual-aid",
+        "making-decisions-without-hierarchy",
+        "resolving-active-conflicts",
+      ];
+      const index = slugOrder.indexOf(slug);
+      const finalIndex = index >= 0 ? index % icons.length : 0;
+      return icons[finalIndex];
+    };
+
+    const iconImage = getIconImage(post.slug);
+
+    // Format date
+    const formattedDate = new Date(post.frontmatter.date).toLocaleDateString(
+      "en-US",
+      {
+        year: "numeric",
+        month: "long",
+      },
+    );
+
+    // Choose styling based on size prop
+    const containerClasses =
+      size === "xs"
+        ? "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)]"
+        : "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)] sm:gap-[var(--measures-spacing-016)] md:gap-[18px] lg:gap-[var(--measures-spacing-024)]";
+
+    const contentGapClasses =
+      size === "xs"
+        ? "flex flex-col gap-[var(--measures-spacing-008)]"
+        : "flex flex-col gap-[var(--measures-spacing-008)] sm:gap-[var(--measures-spacing-012)] md:gap-[var(--measures-spacing-008)] lg:gap-[var(--measures-spacing-016)] xl:gap-[var(--measures-spacing-004)]";
+
+    const textGapClasses =
+      size === "xs"
+        ? "flex flex-col gap-[var(--measures-spacing-004)]"
+        : "flex flex-col gap-[var(--measures-spacing-004)] md:gap-[var(--measures-spacing-002)] lg:gap-[var(--measures-spacing-004)]";
+
+    const titleClasses =
+      size === "xs"
+        ? "font-bricolage font-medium text-[18px] leading-[120%] text-[var(--color-content-inverse-brand-royal)] group-hover:text-blue-200 transition-colors"
+        : "font-bricolage font-medium text-[18px] leading-[120%] sm:text-[24px] sm:leading-[24px] md:text-[32px] md:leading-[110%] lg:text-[44px] lg:leading-[110%] xl:text-[64px] xl:leading-[110%] text-[var(--color-content-inverse-brand-royal)] group-hover:text-blue-200 transition-colors";
+
+    const descriptionClasses =
+      size === "xs"
+        ? "font-inter font-normal text-[12px] leading-[16px] text-[var(--color-content-inverse-brand-royal)] max-w-md"
+        : "font-inter font-normal text-[12px] leading-[16px] sm:text-[14px] sm:leading-[20px] md:text-[14px] md:leading-[20px] lg:text-[18px] lg:leading-[130%] xl:text-[24px] xl:leading-[32px] text-[var(--color-content-inverse-brand-royal)]";
+
+    const authorClasses =
+      size === "xs"
+        ? "font-inter font-normal text-[10px] leading-[14px] text-[var(--color-content-inverse-brand-royal)]"
+        : "font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] text-[var(--color-content-inverse-brand-royal)]";
+
+    const dateClasses =
+      size === "xs"
+        ? "font-inter font-normal text-[10px] leading-[14px] text-[var(--color-content-inverse-brand-royal)]"
+        : "font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] text-[var(--color-content-inverse-brand-royal)]";
+
+    return (
+      <ContentContainerView
+        post={post}
+        width={width}
+        size={size}
+        iconImage={iconImage}
+        containerClasses={containerClasses}
+        contentGapClasses={contentGapClasses}
+        textGapClasses={textGapClasses}
+        titleClasses={titleClasses}
+        descriptionClasses={descriptionClasses}
+        authorClasses={authorClasses}
+        dateClasses={dateClasses}
+        formattedDate={formattedDate}
+      />
+    );
+  },
+);
+
+ContentContainerContainer.displayName = "ContentContainer";
+
+export default ContentContainerContainer;
diff --git a/app/components/ContentContainer/ContentContainer.types.ts b/app/components/ContentContainer/ContentContainer.types.ts
new file mode 100644
index 0000000..f29387e
--- /dev/null
+++ b/app/components/ContentContainer/ContentContainer.types.ts
@@ -0,0 +1,22 @@
+import type { BlogPost } from "../../../lib/content";
+
+export interface ContentContainerProps {
+  post: BlogPost;
+  width?: string;
+  size?: "xs" | "responsive";
+}
+
+export interface ContentContainerViewProps {
+  post: BlogPost;
+  width: string;
+  size: "xs" | "responsive";
+  iconImage: string;
+  containerClasses: string;
+  contentGapClasses: string;
+  textGapClasses: string;
+  titleClasses: string;
+  descriptionClasses: string;
+  authorClasses: string;
+  dateClasses: string;
+  formattedDate: string;
+}
diff --git a/app/components/ContentContainer/ContentContainer.view.tsx b/app/components/ContentContainer/ContentContainer.view.tsx
new file mode 100644
index 0000000..9233107
--- /dev/null
+++ b/app/components/ContentContainer/ContentContainer.view.tsx
@@ -0,0 +1,59 @@
+import { memo } from "react";
+import type { ContentContainerViewProps } from "./ContentContainer.types";
+
+function ContentContainerView({
+  post,
+  width,
+  size,
+  iconImage,
+  containerClasses,
+  contentGapClasses,
+  textGapClasses,
+  titleClasses,
+  descriptionClasses,
+  authorClasses,
+  dateClasses,
+  formattedDate,
+}: ContentContainerViewProps) {
+  return (
+    <div
+      className={containerClasses}
+      style={size === "responsive" ? {} : { width }}
+    >
+      {/* Content Container - gap between icon and text */}
+      <div className={contentGapClasses}>
+        {/* Icon */}
+        <div className="w-[60px] h-[30px] flex items-center justify-center">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={iconImage}
+            alt={`Icon for ${post.frontmatter.title}`}
+            className="w-[60px] h-[30px] object-contain"
+          />
+        </div>
+
+        {/* Text Container */}
+        <div className={textGapClasses}>
+          {/* Title */}
+          <h3 className={titleClasses}>{post.frontmatter.title}</h3>
+
+          {/* Description */}
+          <p className={descriptionClasses}>{post.frontmatter.description}</p>
+        </div>
+      </div>
+
+      {/* Metadata Container - horizontal with 8px gap */}
+      <div className="flex items-center gap-[var(--measures-spacing-008)]">
+        {/* Author Name */}
+        <span className={authorClasses}>{post.frontmatter.author}</span>
+
+        {/* Date */}
+        <span className={dateClasses}>{formattedDate}</span>
+      </div>
+    </div>
+  );
+}
+
+ContentContainerView.displayName = "ContentContainerView";
+
+export default memo(ContentContainerView);
diff --git a/app/components/ContentContainer/index.tsx b/app/components/ContentContainer/index.tsx
new file mode 100644
index 0000000..0b06c35
--- /dev/null
+++ b/app/components/ContentContainer/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./ContentContainer.container";
+export type { ContentContainerProps } from "./ContentContainer.types";
diff --git a/app/components/ContentLockup.tsx b/app/components/ContentLockup/ContentLockup.container.tsx
similarity index 57%
rename from app/components/ContentLockup.tsx
rename to app/components/ContentLockup/ContentLockup.container.tsx
index 2d4c7b9..2e1ad5f 100644
--- a/app/components/ContentLockup.tsx
+++ b/app/components/ContentLockup/ContentLockup.container.tsx
@@ -1,39 +1,10 @@
 "use client";
 
 import { memo } from "react";
-import Button from "./Button";
-import { getAssetPath } from "../../lib/assetUtils";
+import ContentLockupView from "./ContentLockup.view";
+import type { ContentLockupProps, VariantStyle } from "./ContentLockup.types";
 
-interface ContentLockupProps {
-  title?: string;
-  subtitle?: string;
-  description?: string;
-  ctaText?: string;
-  ctaHref?: string;
-  buttonClassName?: string;
-  variant?: "hero" | "feature" | "learn" | "ask" | "ask-inverse";
-  linkText?: string;
-  linkHref?: string;
-  alignment?: "center" | "left";
-  /**
-   * Optional id to attach to the primary title heading.
-   * Useful when a parent section uses aria-labelledby.
-   */
-  titleId?: string;
-}
-
-interface VariantStyle {
-  container: string;
-  textContainer: string;
-  titleGroup: string;
-  titleContainer: string;
-  title: string;
-  subtitle: string;
-  description?: string;
-  shape: string;
-}
-
-const ContentLockup = memo<ContentLockupProps>(
+const ContentLockupContainer = memo<ContentLockupProps>(
   ({
     title,
     subtitle,
@@ -125,102 +96,23 @@ const ContentLockup = memo<ContentLockupProps>(
     const styles = variantStyles[variant] || variantStyles.hero;
 
     return (
-      <div className={styles.container}>
-        {variant === "ask" || variant === "ask-inverse" ? (
-          /* Simplified structure for ask variant */
-          <div
-            className={`${styles.titleGroup} ${
-              alignment === "left" ? "text-left" : "text-center"
-            }`}
-          >
-            <div
-              className={`${styles.titleContainer} ${
-                alignment === "left" ? "justify-start" : "justify-center"
-              }`}
-            >
-              {title ? (
-                <h1 id={titleId} className={styles.title}>
-                  {title}
-                </h1>
-              ) : null}
-            </div>
-            {subtitle ? <h2 className={styles.subtitle}>{subtitle}</h2> : null}
-          </div>
-        ) : (
-          /* Full structure for other variants */
-          <div className={styles.textContainer}>
-            {/* Title and subtitle group */}
-            <div className={styles.titleGroup}>
-              {/* Title container */}
-              <div className={styles.titleContainer}>
-                {title ? (
-                  <h1 id={titleId} className={styles.title}>
-                    {title}
-                  </h1>
-                ) : null}
-                {variant === "hero" && (
-                  <img
-                    src={getAssetPath("assets/Shapes_1.svg")}
-                    alt=""
-                    className={styles.shape}
-                    role="presentation"
-                  />
-                )}
-              </div>
-
-              {/* Subtitle */}
-              {subtitle ? (
-                <h2 className={styles.subtitle}>{subtitle}</h2>
-              ) : null}
-            </div>
-
-            {/* Description */}
-            {description && <p className={styles.description}>{description}</p>}
-          </div>
-        )}
-
-        {/* Link for feature variant */}
-        {variant === "feature" && linkText && (
-          <a
-            href={linkHref || "#"}
-            className="font-inter font-medium text-[16px] leading-[20px] underline text-[var(--color-content-default-primary)] hover:text-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 focus:ring-offset-[#171717] rounded-sm px-1 py-0.5"
-          >
-            {linkText}
-          </a>
-        )}
-
-        {/* CTA Button */}
-        {ctaText && (
-          <div className="flex justify-start">
-            {/* Small button for xsm and sm breakpoints */}
-            <div className="block md:hidden">
-              <Button variant="primary" size="small">
-                {ctaText}
-              </Button>
-            </div>
-            {/* Large button for md and lg breakpoints */}
-            <div className="hidden md:block xl:hidden">
-              <Button
-                variant="primary"
-                size="large"
-                className={buttonClassName}
-              >
-                {ctaText}
-              </Button>
-            </div>
-            {/* XLarge button for xl breakpoint */}
-            <div className="hidden xl:block">
-              <Button variant="primary" size="xlarge">
-                {ctaText}
-              </Button>
-            </div>
-          </div>
-        )}
-      </div>
+      <ContentLockupView
+        title={title}
+        subtitle={subtitle}
+        description={description}
+        ctaText={ctaText}
+        buttonClassName={buttonClassName}
+        variant={variant}
+        linkText={linkText}
+        linkHref={linkHref}
+        alignment={alignment}
+        titleId={titleId}
+        styles={styles}
+      />
     );
   },
 );
 
-ContentLockup.displayName = "ContentLockup";
+ContentLockupContainer.displayName = "ContentLockup";
 
-export default ContentLockup;
+export default ContentLockupContainer;
diff --git a/app/components/ContentLockup/ContentLockup.types.ts b/app/components/ContentLockup/ContentLockup.types.ts
new file mode 100644
index 0000000..be1c2d9
--- /dev/null
+++ b/app/components/ContentLockup/ContentLockup.types.ts
@@ -0,0 +1,43 @@
+export interface ContentLockupProps {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  ctaText?: string;
+  ctaHref?: string;
+  buttonClassName?: string;
+  variant?: "hero" | "feature" | "learn" | "ask" | "ask-inverse";
+  linkText?: string;
+  linkHref?: string;
+  alignment?: "center" | "left";
+  /**
+   * Optional id to attach to the primary title heading.
+   * Useful when a parent section uses aria-labelledby.
+   */
+  titleId?: string;
+}
+
+export interface VariantStyle {
+  container: string;
+  textContainer: string;
+  titleGroup: string;
+  titleContainer: string;
+  title: string;
+  subtitle: string;
+  description?: string;
+  shape: string;
+}
+
+export interface ContentLockupViewProps {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  ctaText?: string;
+  ctaHref?: string;
+  buttonClassName: string;
+  variant: "hero" | "feature" | "learn" | "ask" | "ask-inverse";
+  linkText?: string;
+  linkHref?: string;
+  alignment: "center" | "left";
+  titleId?: string;
+  styles: VariantStyle;
+}
diff --git a/app/components/ContentLockup/ContentLockup.view.tsx b/app/components/ContentLockup/ContentLockup.view.tsx
new file mode 100644
index 0000000..6f13269
--- /dev/null
+++ b/app/components/ContentLockup/ContentLockup.view.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { memo } from "react";
+import Button from "../Button";
+import { getAssetPath } from "../../../lib/assetUtils";
+import type { ContentLockupViewProps } from "./ContentLockup.types";
+
+function ContentLockupView({
+  title,
+  subtitle,
+  description,
+  ctaText,
+  buttonClassName,
+  variant,
+  linkText,
+  linkHref,
+  alignment,
+  titleId,
+  styles,
+}: ContentLockupViewProps) {
+  return (
+    <div className={styles.container}>
+      {variant === "ask" || variant === "ask-inverse" ? (
+        /* Simplified structure for ask variant */
+        <div
+          className={`${styles.titleGroup} ${
+            alignment === "left" ? "text-left" : "text-center"
+          }`}
+        >
+          <div
+            className={`${styles.titleContainer} ${
+              alignment === "left" ? "justify-start" : "justify-center"
+            }`}
+          >
+            {title ? (
+              <h1 id={titleId} className={styles.title}>
+                {title}
+              </h1>
+            ) : null}
+          </div>
+          {subtitle ? <h2 className={styles.subtitle}>{subtitle}</h2> : null}
+        </div>
+      ) : (
+        /* Full structure for other variants */
+        <div className={styles.textContainer}>
+          {/* Title and subtitle group */}
+          <div className={styles.titleGroup}>
+            {/* Title container */}
+            <div className={styles.titleContainer}>
+              {title ? (
+                <h1 id={titleId} className={styles.title}>
+                  {title}
+                </h1>
+              ) : null}
+              {variant === "hero" && (
+                <img
+                  src={getAssetPath("assets/Shapes_1.svg")}
+                  alt=""
+                  className={styles.shape}
+                  role="presentation"
+                />
+              )}
+            </div>
+
+            {/* Subtitle */}
+            {subtitle ? <h2 className={styles.subtitle}>{subtitle}</h2> : null}
+          </div>
+
+          {/* Description */}
+          {description && <p className={styles.description}>{description}</p>}
+        </div>
+      )}
+
+      {/* Link for feature variant */}
+      {variant === "feature" && linkText && (
+        <a
+          href={linkHref || "#"}
+          className="font-inter font-medium text-[16px] leading-[20px] underline text-[var(--color-content-default-primary)] hover:text-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 focus:ring-offset-[#171717] rounded-sm px-1 py-0.5"
+        >
+          {linkText}
+        </a>
+      )}
+
+      {/* CTA Button */}
+      {ctaText && (
+        <div className="flex justify-start">
+          {/* Small button for xsm and sm breakpoints */}
+          <div className="block md:hidden">
+            <Button variant="primary" size="small">
+              {ctaText}
+            </Button>
+          </div>
+          {/* Large button for md and lg breakpoints */}
+          <div className="hidden md:block xl:hidden">
+            <Button variant="primary" size="large" className={buttonClassName}>
+              {ctaText}
+            </Button>
+          </div>
+          {/* XLarge button for xl breakpoint */}
+          <div className="hidden xl:block">
+            <Button variant="primary" size="xlarge">
+              {ctaText}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+ContentLockupView.displayName = "ContentLockupView";
+
+export default memo(ContentLockupView);
diff --git a/app/components/ContentLockup/index.tsx b/app/components/ContentLockup/index.tsx
new file mode 100644
index 0000000..9ccd08e
--- /dev/null
+++ b/app/components/ContentLockup/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./ContentLockup.container";
+export type { ContentLockupProps } from "./ContentLockup.types";
diff --git a/app/components/ContentThumbnailTemplate.tsx b/app/components/ContentThumbnailTemplate.tsx
deleted file mode 100644
index 31b49c4..0000000
--- a/app/components/ContentThumbnailTemplate.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import Link from "next/link";
-import ContentContainer from "./ContentContainer";
-import { getAssetPath, ASSETS } from "../../lib/assetUtils";
-import type { BlogPost } from "../../lib/content";
-
-/**
- * ContentThumbnailTemplate component for displaying blog post previews
- * Simplified version to debug infinite loop
- */
-interface ContentThumbnailTemplateProps {
-  post: BlogPost;
-  className?: string;
-  variant?: "vertical" | "horizontal";
-  slugOrder?: string[];
-}
-
-const ContentThumbnailTemplate = memo<ContentThumbnailTemplateProps>(
-  ({ post, className = "", variant = "vertical" }) => {
-    // Get article-specific background image from frontmatter
-    const getBackgroundImage = (
-      post: BlogPost,
-      variant: "vertical" | "horizontal",
-    ): string => {
-      // Check if post has thumbnail images defined in frontmatter
-      if (post.frontmatter?.thumbnail) {
-        const imageName =
-          variant === "vertical"
-            ? post.frontmatter.thumbnail.vertical
-            : post.frontmatter.thumbnail.horizontal;
-
-        if (imageName) {
-          // Return path to image in public/content/blog directory
-          return `/content/blog/${imageName}`;
-        }
-      }
-
-      // Fallback to default images if no thumbnail specified
-      const fallbackImages: Record<string, string> = {
-        vertical: getAssetPath(ASSETS.VERTICAL_1),
-        horizontal: getAssetPath(ASSETS.HORIZONTAL_1),
-      };
-
-      return fallbackImages[variant] || fallbackImages.vertical;
-    };
-
-    const backgroundImage = getBackgroundImage(post, variant);
-
-    if (variant === "vertical") {
-      return (
-        <Link
-          href={`/blog/${post.slug}`}
-          className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
-        >
-          <div className="relative w-full aspect-[2/3] overflow-hidden pt-[18px] pl-[18px] pr-[42px] pb-[212px]">
-            {/* Background SVG - fills container with maintained aspect */}
-            <div className="absolute inset-0 z-0">
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
-                src={backgroundImage}
-                alt={`Background for ${post.frontmatter.title}`}
-                className="w-full h-full object-cover"
-              />
-              {/* Gradient overlay for better text readability */}
-              <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/60 z-10" />
-            </div>
-
-            {/* Content Section - positioned within the padding constraints */}
-            <ContentContainer post={post} width="200px" size="xs" />
-          </div>
-        </Link>
-      );
-    }
-
-    // Horizontal variant
-    return (
-      <Link
-        href={`/blog/${post.slug}`}
-        className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
-      >
-        <div className="relative min-w-[320px] max-w-[800px] h-[225.5px] overflow-hidden pt-[13.75px] pr-[76px] pb-[73.75px] pl-[14px]">
-          {/* Background SVG - sized to fit the 320x225.5 container exactly */}
-          <div className="absolute inset-0 z-0">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={backgroundImage}
-              alt={`Background for ${post.frontmatter.title}`}
-              className="w-full h-[225.5px] object-cover"
-            />
-            {/* Gradient overlay */}
-            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-black/70 z-10" />
-          </div>
-
-          {/* Content - positioned within the padding constraints */}
-          <ContentContainer post={post} width="230px" size="xs" />
-        </div>
-      </Link>
-    );
-  },
-);
-
-ContentThumbnailTemplate.displayName = "ContentThumbnailTemplate";
-
-export default ContentThumbnailTemplate;
diff --git a/app/components/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx b/app/components/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx
new file mode 100644
index 0000000..6fdddbc
--- /dev/null
+++ b/app/components/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { memo } from "react";
+import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
+import ContentThumbnailTemplateView from "./ContentThumbnailTemplate.view";
+import type { ContentThumbnailTemplateProps } from "./ContentThumbnailTemplate.types";
+
+const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
+  ({ post, className = "", variant = "vertical" }) => {
+    // Get article-specific background image from frontmatter
+    const getBackgroundImage = (
+      post: ContentThumbnailTemplateProps["post"],
+      variant: "vertical" | "horizontal",
+    ): string => {
+      // Check if post has thumbnail images defined in frontmatter
+      if (post.frontmatter?.thumbnail) {
+        const imageName =
+          variant === "vertical"
+            ? post.frontmatter.thumbnail.vertical
+            : post.frontmatter.thumbnail.horizontal;
+
+        if (imageName) {
+          // Return path to image in public/content/blog directory
+          return `/content/blog/${imageName}`;
+        }
+      }
+
+      // Fallback to default images if no thumbnail specified
+      const fallbackImages: Record<string, string> = {
+        vertical: getAssetPath(ASSETS.VERTICAL_1),
+        horizontal: getAssetPath(ASSETS.HORIZONTAL_1),
+      };
+
+      return fallbackImages[variant] || fallbackImages.vertical;
+    };
+
+    const backgroundImage = getBackgroundImage(post, variant);
+
+    return (
+      <ContentThumbnailTemplateView
+        post={post}
+        className={className}
+        variant={variant}
+        backgroundImage={backgroundImage}
+      />
+    );
+  },
+);
+
+ContentThumbnailTemplateContainer.displayName = "ContentThumbnailTemplate";
+
+export default ContentThumbnailTemplateContainer;
diff --git a/app/components/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts b/app/components/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts
new file mode 100644
index 0000000..c680288
--- /dev/null
+++ b/app/components/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts
@@ -0,0 +1,15 @@
+import type { BlogPost } from "../../../lib/content";
+
+export interface ContentThumbnailTemplateProps {
+  post: BlogPost;
+  className?: string;
+  variant?: "vertical" | "horizontal";
+  slugOrder?: string[];
+}
+
+export interface ContentThumbnailTemplateViewProps {
+  post: BlogPost;
+  className: string;
+  variant: "vertical" | "horizontal";
+  backgroundImage: string;
+}
diff --git a/app/components/ContentThumbnailTemplate/ContentThumbnailTemplate.view.tsx b/app/components/ContentThumbnailTemplate/ContentThumbnailTemplate.view.tsx
new file mode 100644
index 0000000..0fe1e15
--- /dev/null
+++ b/app/components/ContentThumbnailTemplate/ContentThumbnailTemplate.view.tsx
@@ -0,0 +1,66 @@
+import { memo } from "react";
+import Link from "next/link";
+import ContentContainer from "../ContentContainer";
+import type { ContentThumbnailTemplateViewProps } from "./ContentThumbnailTemplate.types";
+
+function ContentThumbnailTemplateView({
+  post,
+  className,
+  variant,
+  backgroundImage,
+}: ContentThumbnailTemplateViewProps) {
+  if (variant === "vertical") {
+    return (
+      <Link
+        href={`/blog/${post.slug}`}
+        className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
+      >
+        <div className="relative w-full aspect-[2/3] overflow-hidden pt-[18px] pl-[18px] pr-[42px] pb-[212px]">
+          {/* Background SVG - fills container with maintained aspect */}
+          <div className="absolute inset-0 z-0">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={backgroundImage}
+              alt={`Background for ${post.frontmatter.title}`}
+              className="w-full h-full object-cover"
+            />
+            {/* Gradient overlay for better text readability */}
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/60 z-10" />
+          </div>
+
+          {/* Content Section - positioned within the padding constraints */}
+          <ContentContainer post={post} width="200px" size="xs" />
+        </div>
+      </Link>
+    );
+  }
+
+  // Horizontal variant
+  return (
+    <Link
+      href={`/blog/${post.slug}`}
+      className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
+    >
+      <div className="relative min-w-[320px] max-w-[800px] h-[225.5px] overflow-hidden pt-[13.75px] pr-[76px] pb-[73.75px] pl-[14px]">
+        {/* Background SVG - sized to fit the 320x225.5 container exactly */}
+        <div className="absolute inset-0 z-0">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={backgroundImage}
+            alt={`Background for ${post.frontmatter.title}`}
+            className="w-full h-[225.5px] object-cover"
+          />
+          {/* Gradient overlay */}
+          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-black/70 z-10" />
+        </div>
+
+        {/* Content - positioned within the padding constraints */}
+        <ContentContainer post={post} width="230px" size="xs" />
+      </div>
+    </Link>
+  );
+}
+
+ContentThumbnailTemplateView.displayName = "ContentThumbnailTemplateView";
+
+export default memo(ContentThumbnailTemplateView);
diff --git a/app/components/ContentThumbnailTemplate/index.tsx b/app/components/ContentThumbnailTemplate/index.tsx
new file mode 100644
index 0000000..c5ed5c6
--- /dev/null
+++ b/app/components/ContentThumbnailTemplate/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./ContentThumbnailTemplate.container";
+export type { ContentThumbnailTemplateProps } from "./ContentThumbnailTemplate.types";
diff --git a/app/components/SelectOption.tsx b/app/components/ContextMenuItem/ContextMenuItem.container.tsx
similarity index 59%
rename from app/components/SelectOption.tsx
rename to app/components/ContextMenuItem/ContextMenuItem.container.tsx
index fc66f43..ddaa795 100644
--- a/app/components/SelectOption.tsx
+++ b/app/components/ContextMenuItem/ContextMenuItem.container.tsx
@@ -1,23 +1,18 @@
 "use client";
 
 import { forwardRef, memo, useCallback } from "react";
+import { ContextMenuItemView } from "./ContextMenuItem.view";
+import type { ContextMenuItemProps } from "./ContextMenuItem.types";
 
-interface SelectOptionProps {
-  children?: React.ReactNode;
-  selected?: boolean;
-  disabled?: boolean;
-  className?: string;
-  onClick?: (
-    _e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
-  ) => void;
-  size?: "small" | "medium" | "large";
-}
-
-const SelectOption = forwardRef<HTMLDivElement, SelectOptionProps>(
+const ContextMenuItemContainer = forwardRef<
+  HTMLDivElement,
+  ContextMenuItemProps
+>(
   (
     {
       children,
       selected = false,
+      hasSubmenu = false,
       disabled = false,
       className = "",
       onClick,
@@ -83,40 +78,23 @@ const SelectOption = forwardRef<HTMLDivElement, SelectOptionProps>(
     );
 
     return (
-      <div
+      <ContextMenuItemView
         ref={ref}
-        className={itemClasses}
-        role="option"
-        tabIndex={disabled ? -1 : 0}
-        aria-selected={selected}
-        aria-disabled={disabled}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
+        selected={selected}
+        hasSubmenu={hasSubmenu}
+        disabled={disabled}
+        className={className}
+        itemClasses={itemClasses}
+        handleClick={handleClick}
+        handleKeyDown={handleKeyDown}
         {...props}
       >
-        <div className="flex items-center gap-[8px]">
-          {selected && (
-            <svg
-              className="w-4 h-4 text-[var(--color-content-default-brand-primary)]"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          )}
-          <span>{children}</span>
-        </div>
-      </div>
+        {children}
+      </ContextMenuItemView>
     );
   },
 );
 
-SelectOption.displayName = "SelectOption";
+ContextMenuItemContainer.displayName = "ContextMenuItem";
 
-export default memo(SelectOption);
+export default memo(ContextMenuItemContainer);
diff --git a/app/components/ContextMenuItem/ContextMenuItem.types.ts b/app/components/ContextMenuItem/ContextMenuItem.types.ts
new file mode 100644
index 0000000..1580f10
--- /dev/null
+++ b/app/components/ContextMenuItem/ContextMenuItem.types.ts
@@ -0,0 +1,22 @@
+export interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  selected?: boolean;
+  hasSubmenu?: boolean;
+  disabled?: boolean;
+  className?: string;
+  onClick?: (
+    _e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
+  ) => void;
+  size?: "small" | "medium" | "large";
+}
+
+export interface ContextMenuItemViewProps {
+  children?: React.ReactNode;
+  selected: boolean;
+  hasSubmenu: boolean;
+  disabled: boolean;
+  className: string;
+  itemClasses: string;
+  handleClick: (_e: React.MouseEvent<HTMLDivElement>) => void;
+  handleKeyDown: (_e: React.KeyboardEvent<HTMLDivElement>) => void;
+}
diff --git a/app/components/ContextMenuItem/ContextMenuItem.view.tsx b/app/components/ContextMenuItem/ContextMenuItem.view.tsx
new file mode 100644
index 0000000..aa67acc
--- /dev/null
+++ b/app/components/ContextMenuItem/ContextMenuItem.view.tsx
@@ -0,0 +1,71 @@
+import { forwardRef } from "react";
+import type { ContextMenuItemViewProps } from "./ContextMenuItem.types";
+
+export const ContextMenuItemView = forwardRef<
+  HTMLDivElement,
+  ContextMenuItemViewProps
+>(
+  (
+    {
+      children,
+      selected,
+      hasSubmenu,
+      disabled,
+      itemClasses,
+      handleClick,
+      handleKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={itemClasses}
+        role="menuitem"
+        tabIndex={disabled ? -1 : 0}
+        aria-current={selected ? "true" : undefined}
+        aria-disabled={disabled}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        {...props}
+      >
+        <div className="flex items-center gap-[8px]">
+          {selected && (
+            <svg
+              className="w-4 h-4 text-[var(--color-content-default-brand-primary)]"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 13l4 4L19 7"
+              />
+            </svg>
+          )}
+          <span>{children}</span>
+        </div>
+        {hasSubmenu && (
+          <svg
+            className="w-4 h-4 text-[var(--color-content-default-brand-primary)]"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 5l7 7-7 7"
+            />
+          </svg>
+        )}
+      </div>
+    );
+  },
+);
+
+ContextMenuItemView.displayName = "ContextMenuItemView";
diff --git a/app/components/ContextMenuItem/index.tsx b/app/components/ContextMenuItem/index.tsx
new file mode 100644
index 0000000..e7bbe20
--- /dev/null
+++ b/app/components/ContextMenuItem/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./ContextMenuItem.container";
+export type { ContextMenuItemProps } from "./ContextMenuItem.types";
diff --git a/app/components/FeatureGrid.tsx b/app/components/FeatureGrid.tsx
deleted file mode 100644
index e72fe83..0000000
--- a/app/components/FeatureGrid.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client";
-
-import { memo, useMemo } from "react";
-import ContentLockup from "./ContentLockup";
-import MiniCard from "./MiniCard";
-
-interface FeatureGridProps {
-  title?: string;
-  subtitle?: string;
-  className?: string;
-}
-
-const FeatureGrid = memo<FeatureGridProps>(
-  ({ title, subtitle, className = "" }) => {
-    // Memoize the feature data to prevent unnecessary re-renders
-    const features = useMemo(
-      () => [
-        {
-          backgroundColor: "bg-[var(--color-surface-default-brand-royal)]",
-          labelLine1: "Decision-making",
-          labelLine2: "support",
-          panelContent: "/assets/Feature_Support.png",
-          ariaLabel: "Decision-making support tools",
-          href: "#decision-making",
-        },
-        {
-          backgroundColor: "bg-[#D1FFE2]",
-          labelLine1: "Values alignment",
-          labelLine2: "exercises",
-          panelContent: "/assets/Feature_Exercises.png",
-          ariaLabel: "Values alignment exercises",
-          href: "#values-alignment",
-        },
-        {
-          backgroundColor: "bg-[#F4CAFF]",
-          labelLine1: "Membership",
-          labelLine2: "guidance",
-          panelContent: "/assets/Feature_Guidance.png",
-          ariaLabel: "Membership guidance resources",
-          href: "#membership-guidance",
-        },
-        {
-          backgroundColor: "bg-[#CBDDFF]",
-          labelLine1: "Conflict resolution",
-          labelLine2: "tools",
-          panelContent: "/assets/Feature_Tools.png",
-          ariaLabel: "Conflict resolution tools",
-          href: "#conflict-resolution",
-        },
-      ],
-      [],
-    );
-
-    const labelledBy = title ? "feature-grid-headline" : undefined;
-    return (
-      <section
-        className={`p-0 lg:p-[var(--spacing-scale-064)] ${className}`}
-        aria-labelledby={labelledBy}
-        aria-label={labelledBy ? undefined : "Feature tools and services"}
-      >
-        <div className="py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2">
-          <div className="w-full mx-auto gap-[var(--spacing-scale-048)] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)] [container-type:inline-size]">
-            {/* Feature Content Lockup */}
-            <div className="lg:shrink lg:min-w-0">
-              <ContentLockup
-                title={title}
-                subtitle={subtitle}
-                variant="feature"
-                linkText="Learn more"
-                linkHref="#"
-                titleId={labelledBy}
-              />
-            </div>
-
-            {/* MiniCard Grid */}
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)] lg:mt-0 lg:flex-grow lg:shrink-0">
-              {features.map((feature, index) => (
-                <MiniCard
-                  key={index}
-                  backgroundColor={feature.backgroundColor}
-                  labelLine1={feature.labelLine1}
-                  labelLine2={feature.labelLine2}
-                  panelContent={feature.panelContent}
-                  ariaLabel={feature.ariaLabel}
-                  href={feature.href}
-                />
-              ))}
-            </div>
-          </div>
-        </div>
-      </section>
-    );
-  },
-);
-
-FeatureGrid.displayName = "FeatureGrid";
-
-export default FeatureGrid;
diff --git a/app/components/FeatureGrid/FeatureGrid.container.tsx b/app/components/FeatureGrid/FeatureGrid.container.tsx
new file mode 100644
index 0000000..1ef87a8
--- /dev/null
+++ b/app/components/FeatureGrid/FeatureGrid.container.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { memo, useMemo } from "react";
+import FeatureGridView from "./FeatureGrid.view";
+import type { FeatureGridProps, Feature } from "./FeatureGrid.types";
+
+const FeatureGridContainer = memo<FeatureGridProps>(
+  ({ title, subtitle, className = "" }) => {
+    const features: Feature[] = useMemo(
+      () => [
+        {
+          backgroundColor: "bg-[var(--color-surface-default-brand-royal)]",
+          labelLine1: "Decision-making",
+          labelLine2: "support",
+          panelContent: "/assets/Feature_Support.png",
+          ariaLabel: "Decision-making support tools",
+          href: "#decision-making",
+        },
+        {
+          backgroundColor: "bg-[#D1FFE2]",
+          labelLine1: "Values alignment",
+          labelLine2: "exercises",
+          panelContent: "/assets/Feature_Exercises.png",
+          ariaLabel: "Values alignment exercises",
+          href: "#values-alignment",
+        },
+        {
+          backgroundColor: "bg-[#F4CAFF]",
+          labelLine1: "Membership",
+          labelLine2: "guidance",
+          panelContent: "/assets/Feature_Guidance.png",
+          ariaLabel: "Membership guidance resources",
+          href: "#membership-guidance",
+        },
+        {
+          backgroundColor: "bg-[#CBDDFF]",
+          labelLine1: "Conflict resolution",
+          labelLine2: "tools",
+          panelContent: "/assets/Feature_Tools.png",
+          ariaLabel: "Conflict resolution tools",
+          href: "#conflict-resolution",
+        },
+      ],
+      [],
+    );
+
+    const labelledBy = title ? "feature-grid-headline" : undefined;
+
+    return (
+      <FeatureGridView
+        title={title}
+        subtitle={subtitle}
+        className={className}
+        features={features}
+        labelledBy={labelledBy}
+      />
+    );
+  },
+);
+
+FeatureGridContainer.displayName = "FeatureGrid";
+
+export default FeatureGridContainer;
diff --git a/app/components/FeatureGrid/FeatureGrid.types.ts b/app/components/FeatureGrid/FeatureGrid.types.ts
new file mode 100644
index 0000000..31e061a
--- /dev/null
+++ b/app/components/FeatureGrid/FeatureGrid.types.ts
@@ -0,0 +1,19 @@
+export interface FeatureGridProps {
+  title?: string;
+  subtitle?: string;
+  className?: string;
+}
+
+export interface Feature {
+  backgroundColor: string;
+  labelLine1: string;
+  labelLine2: string;
+  panelContent: string;
+  ariaLabel: string;
+  href: string;
+}
+
+export interface FeatureGridViewProps extends FeatureGridProps {
+  features: Feature[];
+  labelledBy?: string;
+}
diff --git a/app/components/FeatureGrid/FeatureGrid.view.tsx b/app/components/FeatureGrid/FeatureGrid.view.tsx
new file mode 100644
index 0000000..4429d93
--- /dev/null
+++ b/app/components/FeatureGrid/FeatureGrid.view.tsx
@@ -0,0 +1,52 @@
+import ContentLockup from "../ContentLockup";
+import MiniCard from "../MiniCard";
+import type { FeatureGridViewProps } from "./FeatureGrid.types";
+
+function FeatureGridView({
+  title,
+  subtitle,
+  className = "",
+  features,
+  labelledBy,
+}: FeatureGridViewProps) {
+  return (
+    <section
+      className={`p-0 lg:p-[var(--spacing-scale-064)] ${className}`}
+      aria-labelledby={labelledBy}
+      aria-label={labelledBy ? undefined : "Feature tools and services"}
+    >
+      <div className="py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2">
+        <div className="w-full mx-auto gap-[var(--spacing-scale-048)] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)] [container-type:inline-size]">
+          {/* Feature Content Lockup */}
+          <div className="lg:shrink lg:min-w-0">
+            <ContentLockup
+              title={title}
+              subtitle={subtitle}
+              variant="feature"
+              linkText="Learn more"
+              linkHref="#"
+              titleId={labelledBy}
+            />
+          </div>
+
+          {/* MiniCard Grid */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)] lg:mt-0 lg:flex-grow lg:shrink-0">
+            {features.map((feature, index) => (
+              <MiniCard
+                key={index}
+                backgroundColor={feature.backgroundColor}
+                labelLine1={feature.labelLine1}
+                labelLine2={feature.labelLine2}
+                panelContent={feature.panelContent}
+                ariaLabel={feature.ariaLabel}
+                href={feature.href}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default FeatureGridView;
diff --git a/app/components/FeatureGrid/index.tsx b/app/components/FeatureGrid/index.tsx
new file mode 100644
index 0000000..8fc1ebd
--- /dev/null
+++ b/app/components/FeatureGrid/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./FeatureGrid.container";
+export * from "./FeatureGrid.types";
diff --git a/app/components/Header/Header.container.tsx b/app/components/Header/Header.container.tsx
new file mode 100644
index 0000000..165f2bf
--- /dev/null
+++ b/app/components/Header/Header.container.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { memo } from "react";
+import { usePathname } from "next/navigation";
+import MenuBarItem from "../MenuBarItem";
+import Button from "../Button";
+import AvatarContainer from "../AvatarContainer";
+import Avatar from "../Avatar";
+import Logo from "../Logo";
+import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
+import { HeaderView } from "./Header.view";
+import type { HeaderProps, NavSize } from "./Header.types";
+
+// Configuration data for testing
+export const navigationItems = [
+  { href: "#", text: "Use cases", extraPadding: true },
+  { href: "/learn", text: "Learn" },
+  { href: "#", text: "About" },
+];
+
+export const avatarImages = [
+  { src: getAssetPath(ASSETS.AVATAR_1), alt: "Avatar 1" },
+  { src: getAssetPath(ASSETS.AVATAR_2), alt: "Avatar 2" },
+  { src: getAssetPath(ASSETS.AVATAR_3), alt: "Avatar 3" },
+];
+
+export const logoConfig = [
+  { breakpoint: "block sm:hidden", size: "header" as const, showText: false },
+  {
+    breakpoint: "hidden sm:block md:hidden",
+    size: "header" as const,
+    showText: true,
+  },
+  {
+    breakpoint: "hidden md:block lg:hidden",
+    size: "headerMd" as const,
+    showText: true,
+  },
+  {
+    breakpoint: "hidden lg:block xl:hidden",
+    size: "headerLg" as const,
+    showText: true,
+  },
+  { breakpoint: "hidden xl:block", size: "headerXl" as const, showText: true },
+];
+
+const HeaderContainer = memo<HeaderProps>(() => {
+  const pathname = usePathname();
+
+  // Schema markup for site navigation
+  const schemaData = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: "CommunityRule",
+    url: "https://communityrule.com",
+    potentialAction: {
+      "@type": "SearchAction",
+      target: "https://communityrule.com/search?q={search_term_string}",
+      "query-input": "required name=search_term_string",
+    },
+  };
+
+  const renderNavigationItems = (size: NavSize) => {
+    return navigationItems.map((item, index) => (
+      <MenuBarItem
+        key={index}
+        href={item.href}
+        size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
+        isActive={pathname === item.href}
+        ariaLabel={`Navigate to ${item.text} page`}
+      >
+        {item.text}
+      </MenuBarItem>
+    ));
+  };
+
+  const renderAvatarGroup = (
+    containerSize: "small" | "medium" | "large" | "xlarge",
+    avatarSize: "small" | "medium" | "large" | "xlarge",
+  ) => {
+    return (
+      <AvatarContainer size={containerSize}>
+        {avatarImages.map((avatar, index) => (
+          <Avatar
+            key={index}
+            src={avatar.src}
+            alt={avatar.alt}
+            size={avatarSize}
+          />
+        ))}
+      </AvatarContainer>
+    );
+  };
+
+  const renderLoginButton = (size: NavSize) => {
+    return (
+      <MenuBarItem href="#" size={size} ariaLabel="Log in to your account">
+        Log in
+      </MenuBarItem>
+    );
+  };
+
+  const renderCreateRuleButton = (
+    buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
+    containerSize: "small" | "medium" | "large" | "xlarge",
+    avatarSize: "small" | "medium" | "large" | "xlarge",
+  ) => {
+    return (
+      <Button
+        size={buttonSize}
+        ariaLabel="Create a new rule with avatar decoration"
+      >
+        {renderAvatarGroup(containerSize, avatarSize)}
+        <span>Create rule</span>
+      </Button>
+    );
+  };
+
+  const renderLogo = (
+    size:
+      | "default"
+      | "homeHeaderXsmall"
+      | "homeHeaderSm"
+      | "homeHeaderMd"
+      | "homeHeaderLg"
+      | "homeHeaderXl"
+      | "header"
+      | "headerMd"
+      | "headerLg"
+      | "headerXl"
+      | "footer"
+      | "footerLg",
+    showText: boolean,
+  ) => {
+    return <Logo size={size} showText={showText} />;
+  };
+
+  return (
+    <HeaderView
+      schemaData={schemaData}
+      logoConfig={logoConfig}
+      renderNavigationItems={renderNavigationItems}
+      renderLoginButton={renderLoginButton}
+      renderCreateRuleButton={renderCreateRuleButton}
+      renderLogo={renderLogo}
+    />
+  );
+});
+
+HeaderContainer.displayName = "Header";
+
+export default HeaderContainer;
diff --git a/app/components/Header/Header.types.ts b/app/components/Header/Header.types.ts
new file mode 100644
index 0000000..b47f5d4
--- /dev/null
+++ b/app/components/Header/Header.types.ts
@@ -0,0 +1,69 @@
+export interface HeaderProps {
+  // No props currently, but keeping interface for future extensibility
+}
+
+export interface HeaderViewProps {
+  schemaData: {
+    "@context": string;
+    "@type": string;
+    name: string;
+    url: string;
+    potentialAction: {
+      "@type": string;
+      target: string;
+      "query-input": string;
+    };
+  };
+  logoConfig: Array<{
+    breakpoint: string;
+    size:
+      | "default"
+      | "homeHeaderXsmall"
+      | "homeHeaderSm"
+      | "homeHeaderMd"
+      | "homeHeaderLg"
+      | "homeHeaderXl"
+      | "header"
+      | "headerMd"
+      | "headerLg"
+      | "headerXl"
+      | "footer"
+      | "footerLg";
+    showText: boolean;
+  }>;
+  renderNavigationItems: (_size: NavSize) => React.ReactNode;
+  renderLoginButton: (_size: NavSize) => React.ReactNode;
+  renderCreateRuleButton: (
+    _buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
+    _containerSize: "small" | "medium" | "large" | "xlarge",
+    _avatarSize: "small" | "medium" | "large" | "xlarge",
+  ) => React.ReactNode;
+  renderLogo: (
+    _size:
+      | "default"
+      | "homeHeaderXsmall"
+      | "homeHeaderSm"
+      | "homeHeaderMd"
+      | "homeHeaderLg"
+      | "homeHeaderXl"
+      | "header"
+      | "headerMd"
+      | "headerLg"
+      | "headerXl"
+      | "footer"
+      | "footerLg",
+    _showText: boolean,
+  ) => React.ReactNode;
+}
+
+export type NavSize =
+  | "default"
+  | "xsmall"
+  | "xsmallUseCases"
+  | "home"
+  | "homeMd"
+  | "homeUseCases"
+  | "large"
+  | "largeUseCases"
+  | "homeXlarge"
+  | "xlarge";
diff --git a/app/components/Header.tsx b/app/components/Header/Header.view.tsx
similarity index 54%
rename from app/components/Header.tsx
rename to app/components/Header/Header.view.tsx
index 93d833f..2ea7986 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header/Header.view.tsx
@@ -1,151 +1,14 @@
-"use client";
-
-import { memo } from "react";
-import { usePathname } from "next/navigation";
-import Logo from "./Logo";
-import MenuBar from "./MenuBar";
-import MenuBarItem from "./MenuBarItem";
-import Button from "./Button";
-import AvatarContainer from "./AvatarContainer";
-import Avatar from "./Avatar";
-import { getAssetPath, ASSETS } from "../../lib/assetUtils";
-
-// Configuration data for testing
-export const navigationItems = [
-  { href: "#", text: "Use cases", extraPadding: true },
-  { href: "/learn", text: "Learn" },
-  { href: "#", text: "About" },
-];
-
-export const avatarImages = [
-  { src: getAssetPath(ASSETS.AVATAR_1), alt: "Avatar 1" },
-  { src: getAssetPath(ASSETS.AVATAR_2), alt: "Avatar 2" },
-  { src: getAssetPath(ASSETS.AVATAR_3), alt: "Avatar 3" },
-];
-
-export const logoConfig = [
-  { breakpoint: "block sm:hidden", size: "header" as const, showText: false },
-  {
-    breakpoint: "hidden sm:block md:hidden",
-    size: "header" as const,
-    showText: true,
-  },
-  {
-    breakpoint: "hidden md:block lg:hidden",
-    size: "headerMd" as const,
-    showText: true,
-  },
-  {
-    breakpoint: "hidden lg:block xl:hidden",
-    size: "headerLg" as const,
-    showText: true,
-  },
-  { breakpoint: "hidden xl:block", size: "headerXl" as const, showText: true },
-];
-
-const Header = memo(() => {
-  const pathname = usePathname();
-
-  // Schema markup for site navigation
-  const schemaData = {
-    "@context": "https://schema.org",
-    "@type": "WebSite",
-    name: "CommunityRule",
-    url: "https://communityrule.com",
-    potentialAction: {
-      "@type": "SearchAction",
-      target: "https://communityrule.com/search?q={search_term_string}",
-      "query-input": "required name=search_term_string",
-    },
-  };
-
-  type NavSize =
-    | "default"
-    | "xsmall"
-    | "xsmallUseCases"
-    | "home"
-    | "homeMd"
-    | "homeUseCases"
-    | "large"
-    | "largeUseCases"
-    | "homeXlarge"
-    | "xlarge";
-
-  const renderNavigationItems = (size: NavSize) => {
-    return navigationItems.map((item, index) => (
-      <MenuBarItem
-        key={index}
-        href={item.href}
-        size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
-        isActive={pathname === item.href}
-        ariaLabel={`Navigate to ${item.text} page`}
-      >
-        {item.text}
-      </MenuBarItem>
-    ));
-  };
-
-  const renderAvatarGroup = (
-    containerSize: "small" | "medium" | "large" | "xlarge",
-    avatarSize: "small" | "medium" | "large" | "xlarge",
-  ) => {
-    return (
-      <AvatarContainer size={containerSize}>
-        {avatarImages.map((avatar, index) => (
-          <Avatar
-            key={index}
-            src={avatar.src}
-            alt={avatar.alt}
-            size={avatarSize}
-          />
-        ))}
-      </AvatarContainer>
-    );
-  };
-
-  const renderLoginButton = (size: NavSize) => {
-    return (
-      <MenuBarItem href="#" size={size} ariaLabel="Log in to your account">
-        Log in
-      </MenuBarItem>
-    );
-  };
-
-  const renderCreateRuleButton = (
-    buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
-    containerSize: "small" | "medium" | "large" | "xlarge",
-    avatarSize: "small" | "medium" | "large" | "xlarge",
-  ) => {
-    return (
-      <Button
-        size={buttonSize}
-        ariaLabel="Create a new rule with avatar decoration"
-      >
-        {renderAvatarGroup(containerSize, avatarSize)}
-        <span>Create rule</span>
-      </Button>
-    );
-  };
-
-  const renderLogo = (
-    size:
-      | "default"
-      | "homeHeaderXsmall"
-      | "homeHeaderSm"
-      | "homeHeaderMd"
-      | "homeHeaderLg"
-      | "homeHeaderXl"
-      | "header"
-      | "headerMd"
-      | "headerLg"
-      | "headerXl"
-      | "footer"
-      | "footerLg",
-    showText: boolean,
-  ) => {
-    return <Logo size={size} showText={showText} />;
-  };
+import MenuBar from "../MenuBar";
+import type { HeaderViewProps } from "./Header.types";
 
+export function HeaderView({
+  schemaData,
+  logoConfig,
+  renderNavigationItems,
+  renderLoginButton,
+  renderCreateRuleButton,
+  renderLogo,
+}: HeaderViewProps) {
   return (
     <>
       <script
@@ -253,8 +116,4 @@ const Header = memo(() => {
       </header>
     </>
   );
-});
-
-Header.displayName = "Header";
-
-export default Header;
+}
diff --git a/app/components/Header/index.tsx b/app/components/Header/index.tsx
new file mode 100644
index 0000000..007f726
--- /dev/null
+++ b/app/components/Header/index.tsx
@@ -0,0 +1,3 @@
+export { default } from "./Header.container";
+export type { HeaderProps } from "./Header.types";
+export { navigationItems, avatarImages, logoConfig } from "./Header.container";
diff --git a/app/components/HomeHeader.tsx b/app/components/HomeHeader.tsx
deleted file mode 100644
index 4a67d31..0000000
--- a/app/components/HomeHeader.tsx
+++ /dev/null
@@ -1,287 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import { usePathname } from "next/navigation";
-import Logo from "./Logo";
-import MenuBar from "./MenuBar";
-import MenuBarItem from "./MenuBarItem";
-import Button from "./Button";
-import AvatarContainer from "./AvatarContainer";
-import Avatar from "./Avatar";
-import HeaderTab from "./HeaderTab";
-
-const HomeHeader = memo(() => {
-  const pathname = usePathname();
-
-  // Schema markup for site navigation (home page specific)
-  const schemaData = {
-    "@context": "https://schema.org",
-    "@type": "WebSite",
-    name: "CommunityRule",
-    url: "https://communityrule.com",
-    description: "Build operating manuals for successful communities",
-    potentialAction: {
-      "@type": "SearchAction",
-      target: "https://communityrule.com/search?q={search_term_string}",
-      "query-input": "required name=search_term_string",
-    },
-  };
-
-  const navigationItems = [
-    { href: "#", text: "Use cases", extraPadding: true },
-    { href: "/learn", text: "Learn" },
-    { href: "#", text: "About" },
-  ];
-
-  const avatarImages = [
-    { src: "/assets/Avatar_1.png", alt: "Avatar 1" },
-    { src: "/assets/Avatar_2.png", alt: "Avatar 2" },
-    { src: "/assets/Avatar_3.png", alt: "Avatar 3" },
-  ];
-
-  const logoConfig = [
-    {
-      breakpoint: "block sm:hidden",
-      size: "homeHeaderXsmall" as const,
-      showText: false,
-    },
-    {
-      breakpoint: "hidden sm:block md:hidden",
-      size: "homeHeaderSm" as const,
-      showText: true,
-    },
-    {
-      breakpoint: "hidden md:block lg:hidden",
-      size: "homeHeaderMd" as const,
-      showText: true,
-    },
-    {
-      breakpoint: "hidden lg:block xl:hidden",
-      size: "homeHeaderLg" as const,
-      showText: true,
-    },
-    {
-      breakpoint: "hidden xl:block",
-      size: "homeHeaderXl" as const,
-      showText: true,
-    },
-  ];
-
-  type NavSize =
-    | "default"
-    | "xsmall"
-    | "xsmallUseCases"
-    | "home"
-    | "homeMd"
-    | "homeUseCases"
-    | "large"
-    | "largeUseCases"
-    | "homeXlarge"
-    | "xlarge";
-
-  const renderNavigationItems = (size: NavSize) => {
-    return navigationItems.map((item, index) => (
-      <MenuBarItem
-        key={index}
-        href={item.href}
-        size={
-          item.extraPadding &&
-          (size === "xsmall" ||
-            size === "default" ||
-            size === "home" ||
-            size === "homeMd" ||
-            size === "large" ||
-            size === "homeXlarge")
-            ? size === "home" || size === "homeMd"
-              ? "homeMd"
-              : size === "large"
-                ? "large"
-                : size === "homeXlarge"
-                  ? "homeXlarge"
-                  : "xsmallUseCases"
-            : size
-        }
-        variant={
-          size === "xsmall" ||
-          size === "default" ||
-          size === "home" ||
-          size === "homeMd" ||
-          size === "large" ||
-          size === "homeXlarge"
-            ? "home"
-            : "default"
-        }
-        isActive={pathname === item.href}
-        ariaLabel={`Navigate to ${item.text} page`}
-      >
-        {item.text}
-      </MenuBarItem>
-    ));
-  };
-
-  const renderAvatarGroup = (
-    containerSize: "small" | "medium" | "large" | "xlarge",
-    avatarSize: "small" | "medium" | "large" | "xlarge",
-  ) => {
-    return (
-      <AvatarContainer size={containerSize}>
-        {avatarImages.map((avatar, index) => (
-          <Avatar
-            key={index}
-            src={avatar.src}
-            alt={avatar.alt}
-            size={avatarSize}
-          />
-        ))}
-      </AvatarContainer>
-    );
-  };
-
-  const renderLoginButton = (size: NavSize) => {
-    return (
-      <MenuBarItem
-        href="#"
-        size={size}
-        variant={size === "xsmall" || size === "default" ? "home" : "default"}
-        ariaLabel="Log in to your account"
-      >
-        Log in
-      </MenuBarItem>
-    );
-  };
-
-  const renderCreateRuleButton = (
-    buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
-    containerSize: "small" | "medium" | "large" | "xlarge",
-    avatarSize: "small" | "medium" | "large" | "xlarge",
-  ) => {
-    return (
-      <Button
-        size={buttonSize}
-        variant="secondary"
-        ariaLabel="Create a new rule with avatar decoration"
-      >
-        {renderAvatarGroup(containerSize, avatarSize)}
-        <span>Create rule</span>
-      </Button>
-    );
-  };
-
-  const renderLogo = (
-    size:
-      | "default"
-      | "homeHeaderXsmall"
-      | "homeHeaderSm"
-      | "homeHeaderMd"
-      | "homeHeaderLg"
-      | "homeHeaderXl"
-      | "header"
-      | "headerMd"
-      | "headerLg"
-      | "headerXl"
-      | "footer"
-      | "footerLg",
-    showText: boolean,
-  ) => {
-    return <Logo size={size} showText={showText} />;
-  };
-
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
-      />
-      <header
-        className="w-full bg-transparent overflow-hidden"
-        role="banner"
-        aria-label="Home page navigation header"
-      >
-        <nav
-          className="relative flex items-center justify-between mx-auto h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]"
-          role="navigation"
-          aria-label="Main navigation"
-        >
-          <HeaderTab className="flex items-center self-end" stretch={true}>
-            {/* Logo - Consistent left positioning within HeaderTab */}
-            <div>
-              {logoConfig.map((config, index) => (
-                <div key={index} className={config.breakpoint}>
-                  {renderLogo(config.size, config.showText)}
-                </div>
-              ))}
-            </div>
-
-            {/* XSmall menu bar - positioned next to logo */}
-            <div className="block sm:hidden -me-[2px]">
-              <MenuBar size="default">
-                {renderNavigationItems("xsmall")}
-                {renderLoginButton("xsmall")}
-              </MenuBar>
-            </div>
-          </HeaderTab>
-
-          {/* Navigation Links - Centered in header for SM and up */}
-          <div className="absolute left-1/2 transform -translate-x-1/2 hidden sm:block">
-            <div className="hidden sm:block md:hidden">
-              <MenuBar size="default">
-                {renderNavigationItems("xsmall")}
-                {renderLoginButton("xsmall")}
-              </MenuBar>
-            </div>
-
-            <div className="hidden md:block lg:hidden">
-              <MenuBar size="medium">{renderNavigationItems("homeMd")}</MenuBar>
-            </div>
-
-            <div className="hidden lg:block xl:hidden">
-              <MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
-            </div>
-
-            <div className="hidden xl:block">
-              <MenuBar size="large">
-                {renderNavigationItems("homeXlarge")}
-              </MenuBar>
-            </div>
-          </div>
-
-          {/* Authentication Elements - Consistent right alignment outside HeaderTab */}
-          <div className="flex items-center">
-            {/* XSmall and Small breakpoints - create rule button outside HeaderTab */}
-            <div className="block md:hidden">
-              {renderCreateRuleButton("xsmall", "small", "small")}
-            </div>
-
-            {/* Medium breakpoint - login outside HeaderTab, create rule outside */}
-            <div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
-              <div className="flex items-center gap-[var(--spacing-scale-010)]">
-                {renderLoginButton("homeMd")}
-                {renderCreateRuleButton("small", "medium", "medium")}
-              </div>
-            </div>
-
-            {/* Large breakpoint */}
-            <div className="hidden lg:flex xl:hidden items-center">
-              <div className="flex items-center gap-[var(--spacing-scale-004)]">
-                {renderLoginButton("large")}
-                {renderCreateRuleButton("large", "large", "large")}
-              </div>
-            </div>
-
-            {/* XLarge breakpoint */}
-            <div className="hidden xl:flex items-center">
-              <div className="flex items-center gap-[var(--spacing-scale-004)]">
-                {renderLoginButton("homeXlarge")}
-                {renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
-              </div>
-            </div>
-          </div>
-        </nav>
-      </header>
-    </>
-  );
-});
-
-HomeHeader.displayName = "HomeHeader";
-
-export default HomeHeader;
diff --git a/app/components/HomeHeader/HomeHeader.container.tsx b/app/components/HomeHeader/HomeHeader.container.tsx
new file mode 100644
index 0000000..c512dc0
--- /dev/null
+++ b/app/components/HomeHeader/HomeHeader.container.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import { memo } from "react";
+import { usePathname } from "next/navigation";
+import MenuBarItem from "../MenuBarItem";
+import Button from "../Button";
+import AvatarContainer from "../AvatarContainer";
+import Avatar from "../Avatar";
+import Logo from "../Logo";
+import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
+import HomeHeaderView from "./HomeHeader.view";
+import type { HomeHeaderProps, NavSize } from "./HomeHeader.types";
+
+// Configuration data for testing
+export const navigationItems = [
+  { href: "#", text: "Use cases", extraPadding: true },
+  { href: "/learn", text: "Learn" },
+  { href: "#", text: "About" },
+];
+
+export const avatarImages = [
+  { src: getAssetPath(ASSETS.AVATAR_1), alt: "Avatar 1" },
+  { src: getAssetPath(ASSETS.AVATAR_2), alt: "Avatar 2" },
+  { src: getAssetPath(ASSETS.AVATAR_3), alt: "Avatar 3" },
+];
+
+export const logoConfig = [
+  {
+    breakpoint: "block sm:hidden",
+    size: "homeHeaderXsmall" as const,
+    showText: false,
+  },
+  {
+    breakpoint: "hidden sm:block md:hidden",
+    size: "homeHeaderSm" as const,
+    showText: true,
+  },
+  {
+    breakpoint: "hidden md:block lg:hidden",
+    size: "homeHeaderMd" as const,
+    showText: true,
+  },
+  {
+    breakpoint: "hidden lg:block xl:hidden",
+    size: "homeHeaderLg" as const,
+    showText: true,
+  },
+  {
+    breakpoint: "hidden xl:block",
+    size: "homeHeaderXl" as const,
+    showText: true,
+  },
+];
+
+const HomeHeaderContainer = memo<HomeHeaderProps>(() => {
+  const pathname = usePathname();
+
+  // Schema markup for site navigation (home page specific)
+  const schemaData = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: "CommunityRule",
+    url: "https://communityrule.com",
+    description: "Build operating manuals for successful communities",
+    potentialAction: {
+      "@type": "SearchAction",
+      target: "https://communityrule.com/search?q={search_term_string}",
+      "query-input": "required name=search_term_string",
+    },
+  };
+
+  const renderNavigationItems = (size: NavSize) => {
+    return navigationItems.map((item, index) => (
+      <MenuBarItem
+        key={index}
+        href={item.href}
+        size={
+          item.extraPadding &&
+          (size === "xsmall" ||
+            size === "default" ||
+            size === "home" ||
+            size === "homeMd" ||
+            size === "large" ||
+            size === "homeXlarge")
+            ? size === "home" || size === "homeMd"
+              ? "homeMd"
+              : size === "large"
+                ? "large"
+                : size === "homeXlarge"
+                  ? "homeXlarge"
+                  : "xsmallUseCases"
+            : size
+        }
+        variant={
+          size === "xsmall" ||
+          size === "default" ||
+          size === "home" ||
+          size === "homeMd" ||
+          size === "large" ||
+          size === "homeXlarge"
+            ? "home"
+            : "default"
+        }
+        isActive={pathname === item.href}
+        ariaLabel={`Navigate to ${item.text} page`}
+      >
+        {item.text}
+      </MenuBarItem>
+    ));
+  };
+
+  const renderAvatarGroup = (
+    containerSize: "small" | "medium" | "large" | "xlarge",
+    avatarSize: "small" | "medium" | "large" | "xlarge",
+  ) => {
+    return (
+      <AvatarContainer size={containerSize}>
+        {avatarImages.map((avatar, index) => (
+          <Avatar
+            key={index}
+            src={avatar.src}
+            alt={avatar.alt}
+            size={avatarSize}
+          />
+        ))}
+      </AvatarContainer>
+    );
+  };
+
+  const renderLoginButton = (size: NavSize) => {
+    return (
+      <MenuBarItem
+        href="#"
+        size={size}
+        variant={size === "xsmall" || size === "default" ? "home" : "default"}
+        ariaLabel="Log in to your account"
+      >
+        Log in
+      </MenuBarItem>
+    );
+  };
+
+  const renderCreateRuleButton = (
+    buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
+    containerSize: "small" | "medium" | "large" | "xlarge",
+    avatarSize: "small" | "medium" | "large" | "xlarge",
+  ) => {
+    return (
+      <Button
+        size={buttonSize}
+        variant="secondary"
+        ariaLabel="Create a new rule with avatar decoration"
+      >
+        {renderAvatarGroup(containerSize, avatarSize)}
+        <span>Create rule</span>
+      </Button>
+    );
+  };
+
+  const renderLogo = (
+    size:
+      | "default"
+      | "homeHeaderXsmall"
+      | "homeHeaderSm"
+      | "homeHeaderMd"
+      | "homeHeaderLg"
+      | "homeHeaderXl"
+      | "header"
+      | "headerMd"
+      | "headerLg"
+      | "headerXl"
+      | "footer"
+      | "footerLg",
+    showText: boolean,
+  ) => {
+    return <Logo size={size} showText={showText} />;
+  };
+
+  return (
+    <HomeHeaderView
+      schemaData={schemaData}
+      logoConfig={logoConfig}
+      renderNavigationItems={renderNavigationItems}
+      renderLoginButton={renderLoginButton}
+      renderCreateRuleButton={renderCreateRuleButton}
+      renderLogo={renderLogo}
+    />
+  );
+});
+
+HomeHeaderContainer.displayName = "HomeHeader";
+
+export default HomeHeaderContainer;
diff --git a/app/components/HomeHeader/HomeHeader.types.ts b/app/components/HomeHeader/HomeHeader.types.ts
new file mode 100644
index 0000000..2a52c90
--- /dev/null
+++ b/app/components/HomeHeader/HomeHeader.types.ts
@@ -0,0 +1,61 @@
+import type React from "react";
+
+export interface HomeHeaderProps {
+  // Currently no props, but keeping interface for future extensibility
+}
+
+export type NavSize =
+  | "default"
+  | "xsmall"
+  | "xsmallUseCases"
+  | "home"
+  | "homeMd"
+  | "homeUseCases"
+  | "large"
+  | "largeUseCases"
+  | "homeXlarge"
+  | "xlarge";
+
+export interface HomeHeaderViewProps {
+  schemaData: object;
+  logoConfig: Array<{
+    breakpoint: string;
+    size:
+      | "default"
+      | "homeHeaderXsmall"
+      | "homeHeaderSm"
+      | "homeHeaderMd"
+      | "homeHeaderLg"
+      | "homeHeaderXl"
+      | "header"
+      | "headerMd"
+      | "headerLg"
+      | "headerXl"
+      | "footer"
+      | "footerLg";
+    showText: boolean;
+  }>;
+  renderNavigationItems: (_size: NavSize) => React.ReactNode;
+  renderLoginButton: (_size: NavSize) => React.ReactNode;
+  renderCreateRuleButton: (
+    _buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
+    _containerSize: "small" | "medium" | "large" | "xlarge",
+    _avatarSize: "small" | "medium" | "large" | "xlarge",
+  ) => React.ReactNode;
+  renderLogo: (
+    _size:
+      | "default"
+      | "homeHeaderXsmall"
+      | "homeHeaderSm"
+      | "homeHeaderMd"
+      | "homeHeaderLg"
+      | "homeHeaderXl"
+      | "header"
+      | "headerMd"
+      | "headerLg"
+      | "headerXl"
+      | "footer"
+      | "footerLg",
+    _showText: boolean,
+  ) => React.ReactNode;
+}
diff --git a/app/components/HomeHeader/HomeHeader.view.tsx b/app/components/HomeHeader/HomeHeader.view.tsx
new file mode 100644
index 0000000..0b42713
--- /dev/null
+++ b/app/components/HomeHeader/HomeHeader.view.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { memo } from "react";
+import Script from "next/script";
+import HeaderTab from "../HeaderTab";
+import MenuBar from "../MenuBar";
+import type { HomeHeaderViewProps } from "./HomeHeader.types";
+
+function HomeHeaderView({
+  schemaData,
+  logoConfig,
+  renderNavigationItems,
+  renderLoginButton,
+  renderCreateRuleButton,
+  renderLogo,
+}: HomeHeaderViewProps) {
+  return (
+    <>
+      <Script
+        id="home-header-schema"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
+      />
+      <header
+        className="w-full bg-transparent overflow-hidden"
+        role="banner"
+        aria-label="Home page navigation header"
+      >
+        <nav
+          className="relative flex items-center justify-between mx-auto h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]"
+          role="navigation"
+          aria-label="Main navigation"
+        >
+          <HeaderTab className="flex items-center self-end" stretch={true}>
+            {/* Logo - Consistent left positioning within HeaderTab */}
+            <div>
+              {logoConfig.map((config, index) => (
+                <div key={index} className={config.breakpoint}>
+                  {renderLogo(config.size, config.showText)}
+                </div>
+              ))}
+            </div>
+
+            {/* XSmall menu bar - positioned next to logo */}
+            <div className="block sm:hidden -me-[2px]">
+              <MenuBar size="default">
+                {renderNavigationItems("xsmall")}
+                {renderLoginButton("xsmall")}
+              </MenuBar>
+            </div>
+          </HeaderTab>
+
+          {/* Navigation Links - Centered in header for SM and up */}
+          <div className="absolute left-1/2 transform -translate-x-1/2 hidden sm:block">
+            <div className="hidden sm:block md:hidden">
+              <MenuBar size="default">
+                {renderNavigationItems("xsmall")}
+                {renderLoginButton("xsmall")}
+              </MenuBar>
+            </div>
+
+            <div className="hidden md:block lg:hidden">
+              <MenuBar size="medium">{renderNavigationItems("homeMd")}</MenuBar>
+            </div>
+
+            <div className="hidden lg:block xl:hidden">
+              <MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
+            </div>
+
+            <div className="hidden xl:block">
+              <MenuBar size="large">
+                {renderNavigationItems("homeXlarge")}
+              </MenuBar>
+            </div>
+          </div>
+
+          {/* Authentication Elements - Consistent right alignment outside HeaderTab */}
+          <div className="flex items-center">
+            {/* XSmall and Small breakpoints - create rule button outside HeaderTab */}
+            <div className="block md:hidden">
+              {renderCreateRuleButton("xsmall", "small", "small")}
+            </div>
+
+            {/* Medium breakpoint - login outside HeaderTab, create rule outside */}
+            <div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
+              <div className="flex items-center gap-[var(--spacing-scale-010)]">
+                {renderLoginButton("homeMd")}
+                {renderCreateRuleButton("small", "medium", "medium")}
+              </div>
+            </div>
+
+            {/* Large breakpoint */}
+            <div className="hidden lg:flex xl:hidden items-center">
+              <div className="flex items-center gap-[var(--spacing-scale-004)]">
+                {renderLoginButton("large")}
+                {renderCreateRuleButton("large", "large", "large")}
+              </div>
+            </div>
+
+            {/* XLarge breakpoint */}
+            <div className="hidden xl:flex items-center">
+              <div className="flex items-center gap-[var(--spacing-scale-004)]">
+                {renderLoginButton("homeXlarge")}
+                {renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
+              </div>
+            </div>
+          </div>
+        </nav>
+      </header>
+    </>
+  );
+}
+
+HomeHeaderView.displayName = "HomeHeaderView";
+
+export default memo(HomeHeaderView);
diff --git a/app/components/HomeHeader/index.tsx b/app/components/HomeHeader/index.tsx
new file mode 100644
index 0000000..cc44b0d
--- /dev/null
+++ b/app/components/HomeHeader/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./HomeHeader.container";
+export type { HomeHeaderProps } from "./HomeHeader.types";
diff --git a/app/components/Input.tsx b/app/components/Input/Input.container.tsx
similarity index 74%
rename from app/components/Input.tsx
rename to app/components/Input/Input.container.tsx
index 823cc60..7804504 100644
--- a/app/components/Input.tsx
+++ b/app/components/Input/Input.container.tsx
@@ -1,27 +1,11 @@
 "use client";
 
 import { memo, forwardRef } from "react";
-import { useComponentId, useFormField } from "../hooks";
+import { useComponentId, useFormField } from "../../hooks";
+import { InputView } from "./Input.view";
+import type { InputProps } from "./Input.types";
 
-interface InputProps extends Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  "size" | "onChange" | "onFocus" | "onBlur"
-> {
-  size?: "small" | "medium" | "large";
-  labelVariant?: "default" | "horizontal";
-  state?: "default" | "active" | "hover" | "focus";
-  disabled?: boolean;
-  error?: boolean;
-  label?: string;
-  placeholder?: string;
-  value?: string;
-  onChange?: (_e: React.ChangeEvent<HTMLInputElement>) => void;
-  onFocus?: (_e: React.FocusEvent<HTMLInputElement>) => void;
-  onBlur?: (_e: React.FocusEvent<HTMLInputElement>) => void;
-  className?: string;
-}
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
+const InputContainer = forwardRef<HTMLInputElement, InputProps>(
   (
     {
       size = "medium",
@@ -159,38 +143,34 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       });
 
     return (
-      <div className={containerClasses}>
-        {label && (
-          <label
-            id={labelId}
-            htmlFor={inputId}
-            className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-secondary)]`}
-          >
-            {label}
-          </label>
-        )}
-        <div className={disabled ? "opacity-40" : ""}>
-          <input
-            ref={ref}
-            id={inputId}
-            name={name}
-            type={type}
-            value={value}
-            placeholder={placeholder}
-            onChange={handleChange}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            disabled={disabled}
-            className={inputClasses}
-            style={{ borderRadius: currentSize.radius }}
-            {...props}
-          />
-        </div>
-      </div>
+      <InputView
+        ref={ref}
+        inputId={inputId}
+        labelId={labelId}
+        size={size}
+        labelVariant={labelVariant}
+        state={state}
+        disabled={disabled}
+        error={error}
+        label={label}
+        placeholder={placeholder}
+        value={value}
+        name={name}
+        type={type}
+        className={className}
+        containerClasses={containerClasses}
+        labelClasses={labelClasses}
+        inputClasses={inputClasses}
+        borderRadius={currentSize.radius}
+        handleChange={handleChange}
+        handleFocus={handleFocus}
+        handleBlur={handleBlur}
+        {...props}
+      />
     );
   },
 );
 
-Input.displayName = "Input";
+InputContainer.displayName = "Input";
 
-export default memo(Input);
+export default memo(InputContainer);
diff --git a/app/components/Input/Input.types.ts b/app/components/Input/Input.types.ts
new file mode 100644
index 0000000..59d4aeb
--- /dev/null
+++ b/app/components/Input/Input.types.ts
@@ -0,0 +1,40 @@
+export interface InputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size" | "onChange" | "onFocus" | "onBlur"
+> {
+  size?: "small" | "medium" | "large";
+  labelVariant?: "default" | "horizontal";
+  state?: "default" | "active" | "hover" | "focus";
+  disabled?: boolean;
+  error?: boolean;
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (_e: React.ChangeEvent<HTMLInputElement>) => void;
+  onFocus?: (_e: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (_e: React.FocusEvent<HTMLInputElement>) => void;
+  className?: string;
+}
+
+export interface InputViewProps {
+  inputId: string;
+  labelId: string;
+  size: "small" | "medium" | "large";
+  labelVariant: "default" | "horizontal";
+  state: "default" | "active" | "hover" | "focus";
+  disabled: boolean;
+  error: boolean;
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  name?: string;
+  type: string;
+  className: string;
+  containerClasses: string;
+  labelClasses: string;
+  inputClasses: string;
+  borderRadius: string;
+  handleChange: (_e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleFocus: (_e: React.FocusEvent<HTMLInputElement>) => void;
+  handleBlur: (_e: React.FocusEvent<HTMLInputElement>) => void;
+}
diff --git a/app/components/Input/Input.view.tsx b/app/components/Input/Input.view.tsx
new file mode 100644
index 0000000..aae9d0a
--- /dev/null
+++ b/app/components/Input/Input.view.tsx
@@ -0,0 +1,62 @@
+import { forwardRef } from "react";
+import type { InputViewProps } from "./Input.types";
+
+export const InputView = forwardRef<HTMLInputElement, InputViewProps>(
+  (
+    {
+      inputId,
+      labelId,
+      label,
+      placeholder,
+      value,
+      name,
+      type,
+      disabled,
+      size: _size,
+      labelVariant: _labelVariant,
+      state: _state,
+      error: _error,
+      className: _className,
+      containerClasses,
+      labelClasses,
+      inputClasses,
+      borderRadius,
+      handleChange,
+      handleFocus,
+      handleBlur,
+    },
+    ref,
+  ) => {
+    return (
+      <div className={containerClasses}>
+        {label && (
+          <label
+            id={labelId}
+            htmlFor={inputId}
+            className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-secondary)]`}
+          >
+            {label}
+          </label>
+        )}
+        <div className={disabled ? "opacity-40" : ""}>
+          <input
+            ref={ref}
+            id={inputId}
+            name={name}
+            type={type}
+            value={value}
+            placeholder={placeholder}
+            onChange={handleChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            disabled={disabled}
+            className={inputClasses}
+            style={{ borderRadius }}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+InputView.displayName = "InputView";
diff --git a/app/components/Input/index.tsx b/app/components/Input/index.tsx
new file mode 100644
index 0000000..c788c53
--- /dev/null
+++ b/app/components/Input/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./Input.container";
+export type { InputProps } from "./Input.types";
diff --git a/app/components/LogoWall.tsx b/app/components/LogoWall.tsx
deleted file mode 100644
index b775806..0000000
--- a/app/components/LogoWall.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-"use client";
-
-import { useState, useEffect, memo } from "react";
-import Image from "next/image";
-
-interface Logo {
-  src: string;
-  alt: string;
-  size?: string;
-  order?: string;
-}
-
-interface LogoWallProps {
-  logos?: Logo[];
-}
-
-const LogoWall = memo<LogoWallProps>(({ logos = [] }) => {
-  const [isVisible, setIsVisible] = useState(false);
-
-  // Default logos if none provided - ordered for mobile (3 rows × 2 columns)
-  const defaultLogos: Logo[] = [
-    {
-      src: "/assets/Section/Logo_FoodNotBombs.png",
-      alt: "Food Not Bombs",
-      size: "h-11 lg:h-14 xl:h-[70px]",
-      order: "order-1 sm:order-4", // Mobile: row 1 col 1, SM: row 2 col 1 (bottom left)
-    },
-    {
-      src: "/assets/Section/Logo_StartCOOP.png",
-      alt: "Start COOP",
-      size: "h-[42px] lg:h-[53px] xl:h-[66px]",
-      order: "order-2 sm:order-2", // Mobile: row 1 col 2, SM: row 1 col 2 (top middle)
-    },
-    {
-      src: "/assets/Section/Logo_Metagov.png",
-      alt: "Metagov",
-      size: "h-6 lg:h-8 xl:h-[41px]",
-      order: "order-3 sm:order-1", // Mobile: row 2 col 1, SM: row 1 col 1 (top left)
-    },
-    {
-      src: "/assets/Section/Logo_OpenCivics.png",
-      alt: "Open Civics",
-      size: "h-8 lg:h-10 xl:h-[50px]",
-      order: "order-4 sm:order-5 md:order-6", // Mobile: row 2 col 2, SM: row 2 col 2, MD: swapped with Mutual Aid CO
-    },
-    {
-      src: "/assets/Section/Logo_MutualAidCO.png",
-      alt: "Mutual Aid CO",
-      size: "h-11 lg:h-14 xl:h-[70px]",
-      order: "order-5 sm:order-6 md:order-5", // Mobile: row 3 col 1, SM: row 2 col 3, MD: swapped with OpenCivics
-    },
-    {
-      src: "/assets/Section/Logo_CUBoulder.png",
-      alt: "CU Boulder",
-      size: "h-10 lg:h-12 xl:h-[60px]",
-      order: "order-6 sm:order-3", // Mobile: row 3 col 2, SM: row 1 col 3 (top right)
-    },
-  ];
-
-  const displayLogos = logos.length > 0 ? logos : defaultLogos;
-
-  // Simple fade-in effect after component mounts
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsVisible(true);
-    }, 100);
-
-    return () => clearTimeout(timer);
-  }, []);
-
-  return (
-    <section className="p-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-032)] lg:px-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-048)] xl:px-[160px] xl:py-[var(--spacing-scale-064)]">
-      <div className="flex flex-col gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-024)] xl:gap-[var(--spacing-scale-032)]">
-        {/* Label */}
-        <p className="font-inter font-medium text-[10px] leading-[12px] xl:text-[14px] xl:leading-[12px] uppercase text-[var(--color-content-default-secondary)] text-center">
-          Trusted by leading cooperators
-        </p>
-
-        {/* Logo Grid Container */}
-        <div
-          className={`transition-opacity duration-500 ${
-            isVisible ? "opacity-60" : "opacity-0"
-          }`}
-        >
-          <div className="grid grid-cols-2 grid-rows-3 sm:grid-cols-3 sm:grid-rows-2 md:flex md:justify-between md:items-center gap-x-[var(--spacing-scale-032)] gap-y-[var(--spacing-scale-032)] sm:gap-y-[var(--spacing-scale-048)]">
-            {displayLogos.map((logo, index) => (
-              <div
-                key={index}
-                className={`flex items-center justify-center transition-opacity duration-500 hover:opacity-100 ${
-                  logo.order || ""
-                }`}
-              >
-                <Image
-                  src={logo.src}
-                  alt={logo.alt}
-                  className={`${
-                    logo.size || "h-8"
-                  } w-auto object-contain transition-transform duration-500 hover:scale-105`}
-                  priority={index < 2} // Prioritize first 2 logos for above-the-fold loading
-                  unoptimized // Skip optimization for local images
-                  width={0}
-                  height={0}
-                  sizes="100vw"
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-});
-
-LogoWall.displayName = "LogoWall";
-
-export default LogoWall;
diff --git a/app/components/LogoWall/LogoWall.container.tsx b/app/components/LogoWall/LogoWall.container.tsx
new file mode 100644
index 0000000..019245c
--- /dev/null
+++ b/app/components/LogoWall/LogoWall.container.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { memo, useState, useEffect, useMemo } from "react";
+import LogoWallView from "./LogoWall.view";
+import type { LogoWallProps } from "./LogoWall.types";
+
+const defaultLogos = [
+  {
+    src: "/assets/Section/Logo_FoodNotBombs.png",
+    alt: "Food Not Bombs",
+    size: "h-11 lg:h-14 xl:h-[70px]",
+    order: "order-1 sm:order-4", // Mobile: row 1 col 1, SM: row 2 col 1 (bottom left)
+  },
+  {
+    src: "/assets/Section/Logo_StartCOOP.png",
+    alt: "Start COOP",
+    size: "h-[42px] lg:h-[53px] xl:h-[66px]",
+    order: "order-2 sm:order-2", // Mobile: row 1 col 2, SM: row 1 col 2 (top middle)
+  },
+  {
+    src: "/assets/Section/Logo_Metagov.png",
+    alt: "Metagov",
+    size: "h-6 lg:h-8 xl:h-[41px]",
+    order: "order-3 sm:order-1", // Mobile: row 2 col 1, SM: row 1 col 1 (top left)
+  },
+  {
+    src: "/assets/Section/Logo_OpenCivics.png",
+    alt: "Open Civics",
+    size: "h-8 lg:h-10 xl:h-[50px]",
+    order: "order-4 sm:order-5 md:order-6", // Mobile: row 2 col 2, SM: row 2 col 2, MD: swapped with Mutual Aid CO
+  },
+  {
+    src: "/assets/Section/Logo_MutualAidCO.png",
+    alt: "Mutual Aid CO",
+    size: "h-11 lg:h-14 xl:h-[70px]",
+    order: "order-5 sm:order-6 md:order-5", // Mobile: row 3 col 1, SM: row 2 col 3, MD: swapped with OpenCivics
+  },
+  {
+    src: "/assets/Section/Logo_CUBoulder.png",
+    alt: "CU Boulder",
+    size: "h-10 lg:h-12 xl:h-[60px]",
+    order: "order-6 sm:order-3", // Mobile: row 3 col 2, SM: row 1 col 3 (top right)
+  },
+];
+
+const LogoWallContainer = memo<LogoWallProps>(({ logos, className = "" }) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const displayLogos = useMemo(
+    () => (logos && logos.length > 0 ? logos : defaultLogos),
+    [logos],
+  );
+
+  useEffect(() => {
+    // Trigger fade-in animation after component mounts
+    const timer = setTimeout(() => {
+      setIsVisible(true);
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <LogoWallView
+      isVisible={isVisible}
+      displayLogos={displayLogos}
+      className={className}
+    />
+  );
+});
+
+LogoWallContainer.displayName = "LogoWall";
+
+export default LogoWallContainer;
diff --git a/app/components/LogoWall/LogoWall.types.ts b/app/components/LogoWall/LogoWall.types.ts
new file mode 100644
index 0000000..b186101
--- /dev/null
+++ b/app/components/LogoWall/LogoWall.types.ts
@@ -0,0 +1,24 @@
+export interface LogoWallProps {
+  logos?: Array<{
+    src: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    size?: string;
+    order?: string;
+  }>;
+  className?: string;
+}
+
+export interface LogoWallViewProps {
+  isVisible: boolean;
+  displayLogos: Array<{
+    src: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    size?: string;
+    order?: string;
+  }>;
+  className: string;
+}
diff --git a/app/components/LogoWall/LogoWall.view.tsx b/app/components/LogoWall/LogoWall.view.tsx
new file mode 100644
index 0000000..2384436
--- /dev/null
+++ b/app/components/LogoWall/LogoWall.view.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { memo } from "react";
+import Image from "next/image";
+import type { LogoWallViewProps } from "./LogoWall.types";
+
+function LogoWallView({
+  isVisible,
+  displayLogos,
+  className,
+}: LogoWallViewProps) {
+  return (
+    <section
+      className={`p-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-032)] lg:px-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-048)] xl:px-[160px] xl:py-[var(--spacing-scale-064)] ${className}`}
+    >
+      <div className="flex flex-col gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-024)] xl:gap-[var(--spacing-scale-032)]">
+        {/* Label */}
+        <p className="font-inter font-medium text-[10px] leading-[12px] xl:text-[14px] xl:leading-[12px] uppercase text-[var(--color-content-default-secondary)] text-center">
+          Trusted by leading cooperators
+        </p>
+
+        {/* Logo Grid Container */}
+        <div
+          className={`transition-opacity duration-500 ${
+            isVisible ? "opacity-60" : "opacity-0"
+          }`}
+        >
+          <div className="grid grid-cols-2 grid-rows-3 sm:grid-cols-3 sm:grid-rows-2 md:flex md:justify-between md:items-center gap-x-[var(--spacing-scale-032)] gap-y-[var(--spacing-scale-032)] sm:gap-y-[var(--spacing-scale-048)]">
+            {displayLogos.map((logo, index) => (
+              <div
+                key={index}
+                className={`flex items-center justify-center transition-opacity duration-500 hover:opacity-100 ${
+                  logo.order || ""
+                }`}
+              >
+                <Image
+                  src={logo.src}
+                  alt={logo.alt}
+                  className={`${
+                    logo.size || "h-8"
+                  } w-auto object-contain transition-transform duration-500 hover:scale-105`}
+                  priority={index < 2} // Prioritize first 2 logos for above-the-fold loading
+                  unoptimized // Skip optimization for local images
+                  width={0}
+                  height={0}
+                  sizes="100vw"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LogoWallView.displayName = "LogoWallView";
+
+export default memo(LogoWallView);
diff --git a/app/components/LogoWall/index.tsx b/app/components/LogoWall/index.tsx
new file mode 100644
index 0000000..29e70df
--- /dev/null
+++ b/app/components/LogoWall/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./LogoWall.container";
+export type { LogoWallProps } from "./LogoWall.types";
diff --git a/app/components/MenuBarItem.tsx b/app/components/MenuBarItem/MenuBarItem.container.tsx
similarity index 92%
rename from app/components/MenuBarItem.tsx
rename to app/components/MenuBarItem/MenuBarItem.container.tsx
index 5545d4f..1ca4ba7 100644
--- a/app/components/MenuBarItem.tsx
+++ b/app/components/MenuBarItem/MenuBarItem.container.tsx
@@ -1,27 +1,10 @@
+"use client";
+
 import { memo } from "react";
+import MenuBarItemView from "./MenuBarItem.view";
+import type { MenuBarItemProps } from "./MenuBarItem.types";
 
-interface MenuBarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  href?: string;
-  children?: React.ReactNode;
-  variant?: "default" | "home";
-  size?:
-    | "default"
-    | "xsmall"
-    | "xsmallUseCases"
-    | "home"
-    | "homeMd"
-    | "homeUseCases"
-    | "large"
-    | "largeUseCases"
-    | "homeXlarge"
-    | "xlarge";
-  className?: string;
-  disabled?: boolean;
-  isActive?: boolean;
-  ariaLabel?: string;
-}
-
-const MenuBarItem = memo<MenuBarItemProps>(
+const MenuBarItemContainer = memo<MenuBarItemProps>(
   ({
     href = "#",
     children,
@@ -166,22 +149,20 @@ const MenuBarItem = memo<MenuBarItemProps>(
       ...props,
     };
 
-    if (disabled) {
-      return (
-        <span className={combinedStyles} {...accessibilityProps}>
-          {children}
-        </span>
-      );
-    }
-
     return (
-      <a href={href} className={combinedStyles} {...accessibilityProps}>
+      <MenuBarItemView
+        href={href}
+        disabled={disabled}
+        className={className}
+        combinedStyles={combinedStyles}
+        accessibilityProps={accessibilityProps}
+      >
         {children}
-      </a>
+      </MenuBarItemView>
     );
   },
 );
 
-MenuBarItem.displayName = "MenuBarItem";
+MenuBarItemContainer.displayName = "MenuBarItem";
 
-export default MenuBarItem;
+export default MenuBarItemContainer;
diff --git a/app/components/MenuBarItem/MenuBarItem.types.ts b/app/components/MenuBarItem/MenuBarItem.types.ts
new file mode 100644
index 0000000..d8da10b
--- /dev/null
+++ b/app/components/MenuBarItem/MenuBarItem.types.ts
@@ -0,0 +1,29 @@
+export interface MenuBarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  href?: string;
+  children?: React.ReactNode;
+  variant?: "default" | "home";
+  size?:
+    | "default"
+    | "xsmall"
+    | "xsmallUseCases"
+    | "home"
+    | "homeMd"
+    | "homeUseCases"
+    | "large"
+    | "largeUseCases"
+    | "homeXlarge"
+    | "xlarge";
+  className?: string;
+  disabled?: boolean;
+  isActive?: boolean;
+  ariaLabel?: string;
+}
+
+export interface MenuBarItemViewProps {
+  href: string;
+  children?: React.ReactNode;
+  disabled: boolean;
+  className: string;
+  combinedStyles: string;
+  accessibilityProps: React.HTMLAttributes<HTMLAnchorElement | HTMLSpanElement>;
+}
diff --git a/app/components/MenuBarItem/MenuBarItem.view.tsx b/app/components/MenuBarItem/MenuBarItem.view.tsx
new file mode 100644
index 0000000..5258969
--- /dev/null
+++ b/app/components/MenuBarItem/MenuBarItem.view.tsx
@@ -0,0 +1,28 @@
+import { memo } from "react";
+import type { MenuBarItemViewProps } from "./MenuBarItem.types";
+
+function MenuBarItemView({
+  href,
+  children,
+  disabled,
+  combinedStyles,
+  accessibilityProps,
+}: MenuBarItemViewProps) {
+  if (disabled) {
+    return (
+      <span className={combinedStyles} {...accessibilityProps}>
+        {children}
+      </span>
+    );
+  }
+
+  return (
+    <a href={href} className={combinedStyles} {...accessibilityProps}>
+      {children}
+    </a>
+  );
+}
+
+MenuBarItemView.displayName = "MenuBarItemView";
+
+export default memo(MenuBarItemView);
diff --git a/app/components/MenuBarItem/index.tsx b/app/components/MenuBarItem/index.tsx
new file mode 100644
index 0000000..33cc29c
--- /dev/null
+++ b/app/components/MenuBarItem/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./MenuBarItem.container";
+export type { MenuBarItemProps } from "./MenuBarItem.types";
diff --git a/app/components/MiniCard.tsx b/app/components/MiniCard.tsx
deleted file mode 100644
index e5f269c..0000000
--- a/app/components/MiniCard.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import Image from "next/image";
-
-interface MiniCardProps {
-  children?: React.ReactNode;
-  className?: string;
-  backgroundColor?: string;
-  panelContent?: string;
-  label?: string;
-  labelLine1?: string;
-  labelLine2?: string;
-  onClick?: () => void;
-  href?: string;
-  ariaLabel?: string;
-}
-
-const MiniCard = memo<MiniCardProps>(
-  ({
-    children,
-    className = "",
-    backgroundColor = "bg-[var(--color-surface-default-brand-royal)]",
-    panelContent,
-    label,
-    labelLine1,
-    labelLine2,
-    onClick,
-    href,
-    ariaLabel,
-  }) => {
-    const cardContent = (
-      <div className={`h-[186px] flex flex-col gap-[7px] ${className}`}>
-        {/* Top part - Inner panel */}
-        <div
-          className={`flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-all duration-200 hover:scale-[1.02] hover:shadow-lg`}
-        >
-          {/* Content for the inner panel */}
-          {panelContent && (
-            <div className="flex items-center justify-center w-full h-full">
-              <Image
-                src={panelContent}
-                alt={
-                  ariaLabel ||
-                  `${labelLine1} ${labelLine2}` ||
-                  label ||
-                  "Feature icon"
-                }
-                className="max-w-[58px] max-h-[58px] w-auto h-auto object-contain"
-                width={58}
-                height={58}
-                sizes="(max-width: 768px) 50vw, 25vw"
-                loading="lazy"
-                placeholder="blur"
-                blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k="
-              />
-            </div>
-          )}
-          {children}
-        </div>
-
-        {/* Bottom part - Text container */}
-        <div className="font-inter font-medium text-[12px] leading-[14px] text-center text-[var(--color-content-default-primary)]">
-          {labelLine1 && labelLine2 ? (
-            <>
-              <div>{labelLine1}</div>
-              <div>{labelLine2}</div>
-              <div>&nbsp;</div>
-            </>
-          ) : (
-            label
-          )}
-        </div>
-      </div>
-    );
-
-    // If href is provided, render as a link
-    if (href) {
-      return (
-        <a
-          href={href}
-          className="block focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)] transition-all duration-200 hover:scale-[1.02]"
-          aria-label={
-            ariaLabel ||
-            `${labelLine1} ${labelLine2}` ||
-            label ||
-            "Feature card"
-          }
-          tabIndex={0}
-        >
-          {cardContent}
-        </a>
-      );
-    }
-
-    // If onClick is provided, render as a button
-    if (onClick) {
-      return (
-        <button
-          onClick={onClick}
-          className="block w-full text-left focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)] transition-all duration-200 hover:scale-[1.02]"
-          aria-label={
-            ariaLabel ||
-            `${labelLine1} ${labelLine2}` ||
-            label ||
-            "Feature card"
-          }
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              onClick();
-            }
-          }}
-        >
-          {cardContent}
-        </button>
-      );
-    }
-
-    // Default render as a div
-    return (
-      <div
-        className="block"
-        aria-label={
-          ariaLabel || `${labelLine1} ${labelLine2}` || label || "Feature card"
-        }
-      >
-        {cardContent}
-      </div>
-    );
-  },
-);
-
-MiniCard.displayName = "MiniCard";
-
-export default MiniCard;
diff --git a/app/components/MiniCard/MiniCard.container.tsx b/app/components/MiniCard/MiniCard.container.tsx
new file mode 100644
index 0000000..b9cb788
--- /dev/null
+++ b/app/components/MiniCard/MiniCard.container.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { memo, useMemo } from "react";
+import MiniCardView from "./MiniCard.view";
+import type { MiniCardProps } from "./MiniCard.types";
+
+const MiniCardContainer = memo<MiniCardProps>(
+  ({
+    children,
+    className = "",
+    backgroundColor = "bg-[var(--color-surface-default-brand-royal)]",
+    panelContent,
+    label,
+    labelLine1,
+    labelLine2,
+    onClick,
+    href,
+    ariaLabel,
+  }) => {
+    // Compute aria-label
+    const computedAriaLabel = useMemo(
+      () =>
+        ariaLabel ||
+        (labelLine1 && labelLine2
+          ? `${labelLine1} ${labelLine2}`
+          : label || "Feature card"),
+      [ariaLabel, labelLine1, labelLine2, label],
+    );
+
+    // Determine wrapper element and props
+    const { wrapperElement, wrapperProps } = useMemo(() => {
+      const baseProps = {
+        "aria-label": computedAriaLabel,
+      };
+
+      if (href) {
+        return {
+          wrapperElement: "a" as const,
+          wrapperProps: {
+            ...baseProps,
+            href,
+            className:
+              "block focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)] transition-all duration-200 hover:scale-[1.02]",
+            tabIndex: 0,
+          },
+        };
+      }
+
+      if (onClick) {
+        return {
+          wrapperElement: "button" as const,
+          wrapperProps: {
+            ...baseProps,
+            onClick,
+            className:
+              "block w-full text-left focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)] transition-all duration-200 hover:scale-[1.02]",
+            tabIndex: 0,
+            onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick();
+              }
+            },
+          },
+        };
+      }
+
+      return {
+        wrapperElement: "div" as const,
+        wrapperProps: {
+          ...baseProps,
+          className: "block",
+        },
+      };
+    }, [href, onClick, computedAriaLabel]);
+
+    return (
+      <MiniCardView
+        className={className}
+        backgroundColor={backgroundColor}
+        panelContent={panelContent}
+        label={label}
+        labelLine1={labelLine1}
+        labelLine2={labelLine2}
+        computedAriaLabel={computedAriaLabel}
+        wrapperElement={wrapperElement}
+        wrapperProps={wrapperProps}
+      >
+        {children}
+      </MiniCardView>
+    );
+  },
+);
+
+MiniCardContainer.displayName = "MiniCard";
+
+export default MiniCardContainer;
diff --git a/app/components/MiniCard/MiniCard.types.ts b/app/components/MiniCard/MiniCard.types.ts
new file mode 100644
index 0000000..32f8b21
--- /dev/null
+++ b/app/components/MiniCard/MiniCard.types.ts
@@ -0,0 +1,28 @@
+export interface MiniCardProps {
+  children?: React.ReactNode;
+  className?: string;
+  backgroundColor?: string;
+  panelContent?: string;
+  label?: string;
+  labelLine1?: string;
+  labelLine2?: string;
+  onClick?: () => void;
+  href?: string;
+  ariaLabel?: string;
+}
+
+export interface MiniCardViewProps {
+  children?: React.ReactNode;
+  className: string;
+  backgroundColor: string;
+  panelContent?: string;
+  label?: string;
+  labelLine1?: string;
+  labelLine2?: string;
+  computedAriaLabel: string;
+  wrapperElement: "a" | "button" | "div";
+  wrapperProps:
+    | React.AnchorHTMLAttributes<HTMLAnchorElement>
+    | React.ButtonHTMLAttributes<HTMLButtonElement>
+    | React.HTMLAttributes<HTMLDivElement>;
+}
diff --git a/app/components/MiniCard/MiniCard.view.tsx b/app/components/MiniCard/MiniCard.view.tsx
new file mode 100644
index 0000000..2496ef1
--- /dev/null
+++ b/app/components/MiniCard/MiniCard.view.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { memo } from "react";
+import Image from "next/image";
+import type { MiniCardViewProps } from "./MiniCard.types";
+
+function MiniCardView({
+  children,
+  className,
+  backgroundColor,
+  panelContent,
+  label,
+  labelLine1,
+  labelLine2,
+  computedAriaLabel,
+  wrapperElement,
+  wrapperProps,
+}: MiniCardViewProps) {
+  const cardContentElement = (
+    <div className={`h-[186px] flex flex-col gap-[7px] ${className}`}>
+      {/* Top part - Inner panel */}
+      <div
+        className={`flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-all duration-200 hover:scale-[1.02] hover:shadow-lg`}
+      >
+        {/* Content for the inner panel */}
+        {panelContent && (
+          <div className="flex items-center justify-center w-full h-full">
+            <Image
+              src={panelContent}
+              alt={computedAriaLabel}
+              className="max-w-[58px] max-h-[58px] w-auto h-auto object-contain"
+              width={58}
+              height={58}
+              sizes="(max-width: 768px) 50vw, 25vw"
+              loading="lazy"
+              placeholder="blur"
+              blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k="
+            />
+          </div>
+        )}
+        {children}
+      </div>
+
+      {/* Bottom part - Text container */}
+      <div className="font-inter font-medium text-[12px] leading-[14px] text-center text-[var(--color-content-default-primary)]">
+        {labelLine1 && labelLine2 ? (
+          <>
+            <div>{labelLine1}</div>
+            <div>{labelLine2}</div>
+            <div>&nbsp;</div>
+          </>
+        ) : (
+          label
+        )}
+      </div>
+    </div>
+  );
+
+  if (wrapperElement === "a") {
+    return (
+      <a {...(wrapperProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}>
+        {cardContentElement}
+      </a>
+    );
+  }
+
+  if (wrapperElement === "button") {
+    return (
+      <button
+        {...(wrapperProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+      >
+        {cardContentElement}
+      </button>
+    );
+  }
+
+  return (
+    <div {...(wrapperProps as React.HTMLAttributes<HTMLDivElement>)}>
+      {cardContentElement}
+    </div>
+  );
+}
+
+MiniCardView.displayName = "MiniCardView";
+
+export default memo(MiniCardView);
diff --git a/app/components/MiniCard/index.tsx b/app/components/MiniCard/index.tsx
new file mode 100644
index 0000000..39a3801
--- /dev/null
+++ b/app/components/MiniCard/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./MiniCard.container";
+export type { MiniCardProps } from "./MiniCard.types";
diff --git a/app/components/NavigationItem.tsx b/app/components/NavigationItem/NavigationItem.container.tsx
similarity index 71%
rename from app/components/NavigationItem.tsx
rename to app/components/NavigationItem/NavigationItem.container.tsx
index 038266a..7e84509 100644
--- a/app/components/NavigationItem.tsx
+++ b/app/components/NavigationItem/NavigationItem.container.tsx
@@ -1,15 +1,10 @@
+"use client";
+
 import { memo } from "react";
+import NavigationItemView from "./NavigationItem.view";
+import type { NavigationItemProps } from "./NavigationItem.types";
 
-interface NavigationItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  href?: string;
-  children?: React.ReactNode;
-  variant?: "default";
-  size?: "default" | "xsmall";
-  className?: string;
-  disabled?: boolean;
-}
-
-const NavigationItem = memo<NavigationItemProps>(
+const NavigationItemContainer = memo<NavigationItemProps>(
   ({
     href = "#",
     children,
@@ -17,6 +12,7 @@ const NavigationItem = memo<NavigationItemProps>(
     size = "default",
     className = "",
     disabled = false,
+    isActive = false,
     ...props
   }) => {
     // Variant styles
@@ -48,24 +44,27 @@ const NavigationItem = memo<NavigationItemProps>(
       finalVariant = "default"; // The disabled state is handled by disabled: utilities
     }
 
-    const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${className}`;
+    // Active state styling
+    const activeStyles = isActive
+      ? "!border-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)]"
+      : "";
 
-    if (disabled) {
-      return (
-        <span className={combinedStyles} {...props}>
-          {children}
-        </span>
-      );
-    }
+    const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${activeStyles} ${className}`;
 
     return (
-      <a href={href} className={combinedStyles} {...props}>
+      <NavigationItemView
+        href={href}
+        disabled={disabled}
+        className={className}
+        combinedStyles={combinedStyles}
+        {...props}
+      >
         {children}
-      </a>
+      </NavigationItemView>
     );
   },
 );
 
-NavigationItem.displayName = "NavigationItem";
+NavigationItemContainer.displayName = "NavigationItem";
 
-export default NavigationItem;
+export default NavigationItemContainer;
diff --git a/app/components/NavigationItem/NavigationItem.types.ts b/app/components/NavigationItem/NavigationItem.types.ts
new file mode 100644
index 0000000..c5f9de1
--- /dev/null
+++ b/app/components/NavigationItem/NavigationItem.types.ts
@@ -0,0 +1,20 @@
+export interface NavigationItemProps extends Omit<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  "isActive"
+> {
+  href?: string;
+  children?: React.ReactNode;
+  variant?: "default";
+  size?: "default" | "xsmall";
+  className?: string;
+  disabled?: boolean;
+  isActive?: boolean;
+}
+
+export interface NavigationItemViewProps {
+  href: string;
+  children?: React.ReactNode;
+  disabled: boolean;
+  className: string;
+  combinedStyles: string;
+}
diff --git a/app/components/NavigationItem/NavigationItem.view.tsx b/app/components/NavigationItem/NavigationItem.view.tsx
new file mode 100644
index 0000000..c05506b
--- /dev/null
+++ b/app/components/NavigationItem/NavigationItem.view.tsx
@@ -0,0 +1,28 @@
+import { memo } from "react";
+import type { NavigationItemViewProps } from "./NavigationItem.types";
+
+function NavigationItemView({
+  href,
+  children,
+  disabled,
+  combinedStyles,
+  ...props
+}: NavigationItemViewProps) {
+  if (disabled) {
+    return (
+      <span className={combinedStyles} {...props}>
+        {children}
+      </span>
+    );
+  }
+
+  return (
+    <a href={href} className={combinedStyles} {...props}>
+      {children}
+    </a>
+  );
+}
+
+NavigationItemView.displayName = "NavigationItemView";
+
+export default memo(NavigationItemView);
diff --git a/app/components/NavigationItem/index.tsx b/app/components/NavigationItem/index.tsx
new file mode 100644
index 0000000..e2bbcab
--- /dev/null
+++ b/app/components/NavigationItem/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./NavigationItem.container";
+export type { NavigationItemProps } from "./NavigationItem.types";
diff --git a/app/components/NumberedCards/NumberedCards.container.tsx b/app/components/NumberedCards/NumberedCards.container.tsx
new file mode 100644
index 0000000..604fc17
--- /dev/null
+++ b/app/components/NumberedCards/NumberedCards.container.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { memo } from "react";
+import { useSchemaData } from "../../hooks";
+import NumberedCardsView from "./NumberedCards.view";
+import type { NumberedCardsProps } from "./NumberedCards.types";
+
+const NumberedCardsContainer = memo<NumberedCardsProps>(
+  ({ title, subtitle, cards }) => {
+    const schemaData = useSchemaData({
+      type: "HowTo",
+      name: title,
+      description: subtitle,
+      steps: cards.map((card) => ({
+        name: card.text,
+        text: card.text,
+      })),
+    });
+
+    const schemaJson = JSON.stringify(schemaData);
+
+    return (
+      <NumberedCardsView
+        title={title}
+        subtitle={subtitle}
+        cards={cards}
+        schemaJson={schemaJson}
+      />
+    );
+  },
+);
+
+NumberedCardsContainer.displayName = "NumberedCards";
+
+export default NumberedCardsContainer;
diff --git a/app/components/NumberedCards/NumberedCards.types.ts b/app/components/NumberedCards/NumberedCards.types.ts
new file mode 100644
index 0000000..6250610
--- /dev/null
+++ b/app/components/NumberedCards/NumberedCards.types.ts
@@ -0,0 +1,15 @@
+export interface Card {
+  text: string;
+  iconShape?: string;
+  iconColor?: string;
+}
+
+export interface NumberedCardsProps {
+  title: string;
+  subtitle: string;
+  cards: Card[];
+}
+
+export interface NumberedCardsViewProps extends NumberedCardsProps {
+  schemaJson: string;
+}
diff --git a/app/components/NumberedCards.tsx b/app/components/NumberedCards/NumberedCards.view.tsx
similarity index 70%
rename from app/components/NumberedCards.tsx
rename to app/components/NumberedCards/NumberedCards.view.tsx
index fb68657..220d109 100644
--- a/app/components/NumberedCards.tsx
+++ b/app/components/NumberedCards/NumberedCards.view.tsx
@@ -1,40 +1,19 @@
-"use client";
-
-import { memo } from "react";
-import NumberedCard from "./NumberedCard";
-import SectionHeader from "./SectionHeader";
-import Button from "./Button";
-import { useSchemaData } from "../hooks";
-
-interface Card {
-  text: string;
-  iconShape?: string;
-  iconColor?: string;
-}
-
-interface NumberedCardsProps {
-  title: string;
-  subtitle: string;
-  cards: Card[];
-}
-
-const NumberedCards = memo<NumberedCardsProps>(({ title, subtitle, cards }) => {
-  // Generate schema data using hook
-  const schemaData = useSchemaData({
-    type: "HowTo",
-    name: title,
-    description: subtitle,
-    steps: cards.map((card) => ({
-      name: card.text,
-      text: card.text,
-    })),
-  });
+import SectionHeader from "../SectionHeader";
+import NumberedCard from "../NumberedCard";
+import Button from "../Button";
+import type { NumberedCardsViewProps } from "./NumberedCards.types";
 
+function NumberedCardsView({
+  title,
+  subtitle,
+  cards,
+  schemaJson,
+}: NumberedCardsViewProps) {
   return (
     <>
       <script
         type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
+        dangerouslySetInnerHTML={{ __html: schemaJson }}
       />
       <section className="bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]">
         <div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
@@ -81,8 +60,6 @@ const NumberedCards = memo<NumberedCardsProps>(({ title, subtitle, cards }) => {
       </section>
     </>
   );
-});
+}
 
-NumberedCards.displayName = "NumberedCards";
-
-export default NumberedCards;
+export default NumberedCardsView;
diff --git a/app/components/NumberedCards/index.tsx b/app/components/NumberedCards/index.tsx
new file mode 100644
index 0000000..1f02634
--- /dev/null
+++ b/app/components/NumberedCards/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./NumberedCards.container";
+export * from "./NumberedCards.types";
diff --git a/app/components/QuoteBlock.tsx b/app/components/QuoteBlock.tsx
deleted file mode 100644
index 1eb1619..0000000
--- a/app/components/QuoteBlock.tsx
+++ /dev/null
@@ -1,284 +0,0 @@
-"use client";
-
-import { useState, memo } from "react";
-import Image from "next/image";
-import QuoteDecor from "./QuoteDecor";
-import { logger } from "../../lib/logger";
-
-interface QuoteBlockProps {
-  variant?: "compact" | "standard" | "extended";
-  className?: string;
-  quote?: string;
-  author?: string;
-  source?: string;
-  avatarSrc?: string;
-  id?: string;
-  fallbackAvatarSrc?: string;
-  onError?: (_error: {
-    type: string;
-    message: string;
-    author?: string;
-    avatarSrc?: string;
-    error?: unknown;
-    quote?: boolean;
-  }) => void;
-}
-
-const QuoteBlock = memo<QuoteBlockProps>(
-  ({
-    variant = "standard",
-    className = "",
-    quote = "The rules of decision-making must be open and available to everyone, and this can happen only if they are formalized.",
-    author = "Jo Freeman",
-    source = "The Tyranny of Structurelessness",
-    avatarSrc = "/assets/Quote_Avatar.svg",
-    id,
-    fallbackAvatarSrc = "/assets/Quote_Avatar.svg",
-    onError,
-  }) => {
-    const [imageError, setImageError] = useState(false);
-    const [imageLoading, setImageLoading] = useState(true);
-
-    // Variant configurations
-    interface VariantConfig {
-      container: string;
-      card: string;
-      gap: string;
-      avatarGap: string;
-      avatar: string;
-      quote: string;
-      author: string;
-      source: string;
-      showDecor: boolean;
-    }
-
-    const variants: Record<string, VariantConfig> = {
-      compact: {
-        container:
-          "py-[var(--spacing-scale-032)] px-[var(--spacing-scale-016)]",
-        card: "py-[var(--spacing-scale-032)] px-[var(--spacing-scale-016)] md:py-[var(--spacing-scale-040)] md:px-[var(--spacing-scale-024)] rounded-[var(--radius-measures-radius-small)]",
-        gap: "gap-[var(--spacing-scale-016)] md:gap-[var(--spacing-scale-024)]",
-        avatarGap: "gap-[var(--spacing-scale-012)]",
-        avatar: "w-[48px] h-[48px] md:w-[64px] md:h-[64px]",
-        quote: "text-[16px] leading-[120%] md:text-[20px] md:leading-[110%]",
-        author: "text-[10px] leading-[120%] md:text-[12px]",
-        source: "text-[10px] leading-[120%] md:text-[12px]",
-        showDecor: false,
-      },
-      standard: {
-        container:
-          "md:py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-016)] lg:p-[var(--spacing-scale-064)]",
-        card: "py-[var(--spacing-scale-064)] px-[var(--spacing-scale-020)] md:py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-048)] md:rounded-[var(--radius-measures-radius-medium)] lg:py-[var(--spacing-scale-064)] lg:pl-[120px] lg:pr-[320px]",
-        gap: "gap-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-048)] lg:gap-[var(--spacing-scale-064)] xl:gap-[105px]",
-        avatarGap:
-          "gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-018)] xl:gap-[var(--spacing-scale-032)]",
-        avatar:
-          "md:w-[120px] md:h-[120px] lg:w-[150px] lg:h-[150px] xl:w-[200px] xl:h-[200px]",
-        quote:
-          "text-[18px] leading-[120%] md:text-[36px] md:leading-[110%] md:tracking-[0px] lg:text-[52px] xl:text-[64px]",
-        author:
-          "text-[12px] leading-[120%] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] lg:text-[24px] xl:text-[32px]",
-        source:
-          "text-[12px] leading-[120%] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] lg:text-[24px] xl:text-[32px]",
-        showDecor: true,
-      },
-      extended: {
-        container:
-          "py-[var(--spacing-scale-048)] px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-080)] lg:px-[var(--spacing-scale-048)]",
-        card: "py-[var(--spacing-scale-080)] px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-096)] md:px-[var(--spacing-scale-064)] md:rounded-[var(--radius-measures-radius-large)] lg:py-[var(--spacing-scale-112)] lg:pl-[160px] lg:pr-[400px]",
-        gap: "gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-064)] lg:gap-[var(--spacing-scale-080)] xl:gap-[140px]",
-        avatarGap:
-          "gap-[var(--spacing-scale-032)] lg:gap-[var(--spacing-scale-040)] xl:gap-[var(--spacing-scale-048)]",
-        avatar:
-          "w-[80px] h-[80px] md:w-[140px] md:h-[140px] lg:w-[180px] lg:h-[180px] xl:w-[240px] xl:h-[240px]",
-        quote:
-          "text-[20px] leading-[120%] md:text-[40px] md:leading-[110%] md:tracking-[0px] lg:text-[60px] xl:text-[72px]",
-        author:
-          "text-[14px] leading-[120%] md:text-[20px] md:leading-[120%] md:tracking-[0.24px] lg:text-[28px] xl:text-[36px]",
-        source:
-          "text-[14px] leading-[120%] md:text-[20px] md:leading-[120%] md:tracking-[0.24px] lg:text-[28px] xl:text-[36px]",
-        showDecor: true,
-      },
-    };
-
-    const config = variants[variant] || variants.standard;
-
-    // Use provided ID or generate a stable one based on content
-    const baseId = id || `quote-${author.toLowerCase().replace(/\s+/g, "-")}`;
-    const quoteId = `${baseId}-content`;
-    const authorId = `${baseId}-author`;
-
-    // Error handling functions
-    const handleImageError = (error: unknown) => {
-      logger.warn(
-        `QuoteBlock: Failed to load avatar image for ${author}:`,
-        error,
-      );
-      setImageError(true);
-      setImageLoading(false);
-
-      // Call error callback if provided
-      if (onError) {
-        onError({
-          type: "image_load_error",
-          message: `Failed to load avatar for ${author}`,
-          author,
-          avatarSrc,
-          error,
-        });
-      }
-    };
-
-    const handleImageLoad = () => {
-      setImageLoading(false);
-      setImageError(false);
-    };
-
-    // Validate required props
-    if (!quote || !author) {
-      logger.error("QuoteBlock: Missing required props (quote or author)");
-      if (onError) {
-        onError({
-          type: "missing_props",
-          message: "QuoteBlock requires quote and author props",
-          quote: !!quote,
-          author,
-        });
-      }
-      return null; // Don't render if missing required props
-    }
-
-    // Determine which avatar to use
-    const currentAvatarSrc = imageError ? fallbackAvatarSrc : avatarSrc;
-
-    return (
-      <section
-        className={`${config.container} ${className}`}
-        aria-labelledby={quoteId}
-        role="region"
-      >
-        <div
-          className={`${config.card} bg-[var(--color-surface-default-brand-darker-accent)] relative overflow-hidden`}
-        >
-          {/* Background with noise texture */}
-          <div
-            className="absolute inset-0 bg-[var(--color-surface-default-brand-darker-accent)]"
-            style={{
-              filter:
-                'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="grain" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1" colorInterpolationFilters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="3" seed="7" stitchTiles="stitch" result="noise"/><feColorMatrix in="noise" result="softNoise" type="matrix" values="0.8 0 0 0 0.3 0 0.6 0 0 0.2 0 0 1.0 0 0.4 0 0 0 0.25 0"/><feComposite in="softNoise" in2="SourceAlpha" operator="in" result="maskedNoise"/><feBlend in="SourceGraphic" in2="maskedNoise" mode="multiply"/></filter></defs></svg>#grain\')',
-            }}
-          />
-
-          {/* DECORATIONS (behind content) */}
-          {config.showDecor && (
-            <QuoteDecor
-              className="pointer-events-none absolute z-0
-                        left-0 top-0
-                        w-full h-full"
-              aria-hidden="true"
-            />
-          )}
-
-          <div className={`flex flex-col ${config.gap} relative z-10`}>
-            <div className={`flex flex-col ${config.avatarGap}`}>
-              {/* Avatar with error handling */}
-              <div className="relative">
-                {!imageError ? (
-                  <Image
-                    src={currentAvatarSrc}
-                    alt={`Portrait of ${author}`}
-                    width={64}
-                    height={64}
-                    className={`filter sepia ${
-                      config.avatar
-                    } transition-opacity duration-300 ${
-                      imageLoading ? "opacity-0" : "opacity-100"
-                    }`}
-                    loading="lazy"
-                    onError={handleImageError}
-                    onLoad={handleImageLoad}
-                  />
-                ) : null}
-
-                {/* Loading state */}
-                {imageLoading && !imageError && (
-                  <div
-                    className={`absolute inset-0 bg-gray-200 animate-pulse rounded-full ${config.avatar}`}
-                  />
-                )}
-
-                {/* Error state - show initials */}
-                {imageError && (
-                  <div
-                    className={`flex items-center justify-center bg-gray-300 rounded-full ${config.avatar} text-gray-600 font-bold`}
-                  >
-                    <span className="text-sm md:text-base lg:text-lg xl:text-xl">
-                      {author
-                        .split(" ")
-                        .map((n) => n[0])
-                        .join("")
-                        .toUpperCase()}
-                    </span>
-                  </div>
-                )}
-              </div>
-
-              <blockquote
-                id={quoteId}
-                aria-labelledby={authorId}
-                className="relative"
-              >
-                <p
-                  data-qopen="&ldquo;"
-                  data-qclose="&rdquo;"
-                  className={[
-                    "font-bricolage-grotesque font-normal",
-                    config.quote,
-                    "text-[var(--color-content-inverse-primary)]",
-                    // give space for the hanging open-quote so it's not clipped:
-                    "pl-[0.6em] -indent-[0.6em]",
-                    // inject quotes
-                    "relative before:content-[attr(data-qopen)] after:content-[attr(data-qclose)]",
-                    // lock quote glyphs to your display face
-                    "before:[font-family:var(--font-bricolage-grotesque)]",
-                    "after:[font-family:var(--font-bricolage-grotesque)]",
-                  ].join(" ")}
-                >
-                  {quote}
-                </p>
-              </blockquote>
-            </div>
-            <footer className="flex flex-col gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-012)] xl:gap-[var(--spacing-scale-020)]">
-              <cite
-                id={authorId}
-                className={`font-inter font-normal ${config.author} text-[var(--color-content-inverse-primary)] uppercase not-italic`}
-              >
-                {author}
-              </cite>
-              {source && (
-                <p
-                  data-qopen="&ldquo;"
-                  data-qclose="&rdquo;"
-                  className={[
-                    "font-inter font-normal",
-                    config.source,
-                    "text-[var(--color-content-inverse-primary)] uppercase",
-                    "pl-[0.6em] -indent-[0.6em]",
-                    "relative before:content-[attr(data-qopen)] after:content-[attr(data-qclose)]",
-                    "before:[font-family:var(--font-inter)] after:[font-family:var(--font-inter)]",
-                  ].join(" ")}
-                >
-                  {source}
-                </p>
-              )}
-            </footer>
-          </div>
-        </div>
-      </section>
-    );
-  },
-);
-
-QuoteBlock.displayName = "QuoteBlock";
-
-export default QuoteBlock;
diff --git a/app/components/QuoteBlock/QuoteBlock.container.tsx b/app/components/QuoteBlock/QuoteBlock.container.tsx
new file mode 100644
index 0000000..eb3cf5d
--- /dev/null
+++ b/app/components/QuoteBlock/QuoteBlock.container.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { memo, useState } from "react";
+import { logger } from "../../../lib/logger";
+import QuoteBlockView from "./QuoteBlock.view";
+import type { QuoteBlockProps, VariantConfig } from "./QuoteBlock.types";
+
+const QuoteBlockContainer = memo<QuoteBlockProps>(
+  ({
+    variant = "standard",
+    className = "",
+    quote = "The rules of decision-making must be open and available to everyone, and this can happen only if they are formalized.",
+    author = "Jo Freeman",
+    source = "The Tyranny of Structurelessness",
+    avatarSrc = "/assets/Quote_Avatar.svg",
+    id,
+    fallbackAvatarSrc = "/assets/Quote_Avatar.svg",
+    onError,
+  }) => {
+    const [imageError, setImageError] = useState(false);
+    const [imageLoading, setImageLoading] = useState(true);
+
+    // Variant configurations
+    const variants: Record<string, VariantConfig> = {
+      compact: {
+        container:
+          "py-[var(--spacing-scale-032)] px-[var(--spacing-scale-016)]",
+        card: "py-[var(--spacing-scale-032)] px-[var(--spacing-scale-016)] md:py-[var(--spacing-scale-040)] md:px-[var(--spacing-scale-024)] rounded-[var(--radius-measures-radius-small)]",
+        gap: "gap-[var(--spacing-scale-016)] md:gap-[var(--spacing-scale-024)]",
+        avatarGap: "gap-[var(--spacing-scale-012)]",
+        avatar: "w-[48px] h-[48px] md:w-[64px] md:h-[64px]",
+        quote: "text-[16px] leading-[120%] md:text-[20px] md:leading-[110%]",
+        author: "text-[10px] leading-[120%] md:text-[12px]",
+        source: "text-[10px] leading-[120%] md:text-[12px]",
+        showDecor: false,
+      },
+      standard: {
+        container:
+          "md:py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-016)] lg:p-[var(--spacing-scale-064)]",
+        card: "py-[var(--spacing-scale-064)] px-[var(--spacing-scale-020)] md:py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-048)] md:rounded-[var(--radius-measures-radius-medium)] lg:py-[var(--spacing-scale-064)] lg:pl-[120px] lg:pr-[320px]",
+        gap: "gap-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-048)] lg:gap-[var(--spacing-scale-064)] xl:gap-[105px]",
+        avatarGap:
+          "gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-018)] xl:gap-[var(--spacing-scale-032)]",
+        avatar:
+          "md:w-[120px] md:h-[120px] lg:w-[150px] lg:h-[150px] xl:w-[200px] xl:h-[200px]",
+        quote:
+          "text-[18px] leading-[120%] md:text-[36px] md:leading-[110%] md:tracking-[0px] lg:text-[52px] xl:text-[64px]",
+        author:
+          "text-[12px] leading-[120%] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] lg:text-[24px] xl:text-[32px]",
+        source:
+          "text-[12px] leading-[120%] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] lg:text-[24px] xl:text-[32px]",
+        showDecor: true,
+      },
+      extended: {
+        container:
+          "py-[var(--spacing-scale-048)] px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-080)] lg:px-[var(--spacing-scale-048)]",
+        card: "py-[var(--spacing-scale-080)] px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-096)] md:px-[var(--spacing-scale-064)] md:rounded-[var(--radius-measures-radius-large)] lg:py-[var(--spacing-scale-112)] lg:pl-[160px] lg:pr-[400px]",
+        gap: "gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-064)] lg:gap-[var(--spacing-scale-080)] xl:gap-[140px]",
+        avatarGap:
+          "gap-[var(--spacing-scale-032)] lg:gap-[var(--spacing-scale-040)] xl:gap-[var(--spacing-scale-048)]",
+        avatar:
+          "w-[80px] h-[80px] md:w-[140px] md:h-[140px] lg:w-[180px] lg:h-[180px] xl:w-[240px] xl:h-[240px]",
+        quote:
+          "text-[20px] leading-[120%] md:text-[40px] md:leading-[110%] md:tracking-[0px] lg:text-[60px] xl:text-[72px]",
+        author:
+          "text-[14px] leading-[120%] md:text-[20px] md:leading-[120%] md:tracking-[0.24px] lg:text-[28px] xl:text-[36px]",
+        source:
+          "text-[14px] leading-[120%] md:text-[20px] md:leading-[120%] md:tracking-[0.24px] lg:text-[28px] xl:text-[36px]",
+        showDecor: true,
+      },
+    };
+
+    const config = variants[variant] || variants.standard;
+
+    // Use provided ID or generate a stable one based on content
+    const baseId = id || `quote-${author.toLowerCase().replace(/\s+/g, "-")}`;
+    const quoteId = `${baseId}-content`;
+    const authorId = `${baseId}-author`;
+
+    // Error handling functions
+    const handleImageError = (error: unknown) => {
+      logger.warn(
+        `QuoteBlock: Failed to load avatar image for ${author}:`,
+        error,
+      );
+      setImageError(true);
+      setImageLoading(false);
+
+      // Call error callback if provided
+      if (onError) {
+        onError({
+          type: "image_load_error",
+          message: `Failed to load avatar for ${author}`,
+          author,
+          avatarSrc,
+          error,
+        });
+      }
+    };
+
+    const handleImageLoad = () => {
+      setImageLoading(false);
+      setImageError(false);
+    };
+
+    // Validate required props
+    if (!quote || !author) {
+      logger.error("QuoteBlock: Missing required props (quote or author)");
+      if (onError) {
+        onError({
+          type: "missing_props",
+          message: "QuoteBlock requires quote and author props",
+          quote: !!quote,
+          author,
+        });
+      }
+      return null; // Don't render if missing required props
+    }
+
+    // Determine which avatar to use
+    const currentAvatarSrc = imageError ? fallbackAvatarSrc : avatarSrc;
+
+    return (
+      <QuoteBlockView
+        className={className}
+        quote={quote}
+        author={author}
+        source={source}
+        quoteId={quoteId}
+        authorId={authorId}
+        config={config}
+        imageError={imageError}
+        imageLoading={imageLoading}
+        currentAvatarSrc={currentAvatarSrc}
+        onImageLoad={handleImageLoad}
+        onImageError={handleImageError}
+      />
+    );
+  },
+);
+
+QuoteBlockContainer.displayName = "QuoteBlock";
+
+export default QuoteBlockContainer;
diff --git a/app/components/QuoteBlock/QuoteBlock.types.ts b/app/components/QuoteBlock/QuoteBlock.types.ts
new file mode 100644
index 0000000..478aa29
--- /dev/null
+++ b/app/components/QuoteBlock/QuoteBlock.types.ts
@@ -0,0 +1,45 @@
+export interface QuoteBlockProps {
+  variant?: "compact" | "standard" | "extended";
+  className?: string;
+  quote?: string;
+  author?: string;
+  source?: string;
+  avatarSrc?: string;
+  id?: string;
+  fallbackAvatarSrc?: string;
+  onError?: (_error: {
+    type: string;
+    message: string;
+    author?: string;
+    avatarSrc?: string;
+    error?: unknown;
+    quote?: boolean;
+  }) => void;
+}
+
+export interface VariantConfig {
+  container: string;
+  card: string;
+  gap: string;
+  avatarGap: string;
+  avatar: string;
+  quote: string;
+  author: string;
+  source: string;
+  showDecor: boolean;
+}
+
+export interface QuoteBlockViewProps {
+  className: string;
+  quote: string;
+  author: string;
+  source?: string;
+  quoteId: string;
+  authorId: string;
+  config: VariantConfig;
+  imageError: boolean;
+  imageLoading: boolean;
+  currentAvatarSrc: string;
+  onImageLoad: () => void;
+  onImageError: (_error: unknown) => void;
+}
diff --git a/app/components/QuoteBlock/QuoteBlock.view.tsx b/app/components/QuoteBlock/QuoteBlock.view.tsx
new file mode 100644
index 0000000..82933ce
--- /dev/null
+++ b/app/components/QuoteBlock/QuoteBlock.view.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { memo } from "react";
+import Image from "next/image";
+import QuoteDecor from "../QuoteDecor";
+import type { QuoteBlockViewProps } from "./QuoteBlock.types";
+
+function QuoteBlockView({
+  className,
+  quote,
+  author,
+  source,
+  quoteId,
+  authorId,
+  config,
+  imageError,
+  imageLoading,
+  currentAvatarSrc,
+  onImageLoad,
+  onImageError,
+}: QuoteBlockViewProps) {
+  return (
+    <section
+      className={`${config.container} ${className}`}
+      aria-labelledby={quoteId}
+      role="region"
+    >
+      <div
+        className={`${config.card} bg-[var(--color-surface-default-brand-darker-accent)] relative overflow-hidden`}
+      >
+        {/* Background with noise texture */}
+        <div
+          className="absolute inset-0 bg-[var(--color-surface-default-brand-darker-accent)]"
+          style={{
+            filter:
+              'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="grain" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1" colorInterpolationFilters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="3" seed="7" stitchTiles="stitch" result="noise"/><feColorMatrix in="noise" result="softNoise" type="matrix" values="0.8 0 0 0 0.3 0 0.6 0 0 0.2 0 0 1.0 0 0.4 0 0 0 0.25 0"/><feComposite in="softNoise" in2="SourceAlpha" operator="in" result="maskedNoise"/><feBlend in="SourceGraphic" in2="maskedNoise" mode="multiply"/></filter></defs></svg>#grain\')',
+          }}
+        />
+
+        {/* DECORATIONS (behind content) */}
+        {config.showDecor && (
+          <QuoteDecor
+            className="pointer-events-none absolute z-0
+                        left-0 top-0
+                        w-full h-full"
+            aria-hidden="true"
+          />
+        )}
+
+        <div className={`flex flex-col ${config.gap} relative z-10`}>
+          <div className={`flex flex-col ${config.avatarGap}`}>
+            {/* Avatar with error handling */}
+            <div className="relative">
+              {!imageError ? (
+                <Image
+                  src={currentAvatarSrc}
+                  alt={`Portrait of ${author}`}
+                  width={64}
+                  height={64}
+                  className={`filter sepia ${
+                    config.avatar
+                  } transition-opacity duration-300 ${
+                    imageLoading ? "opacity-0" : "opacity-100"
+                  }`}
+                  loading="lazy"
+                  onError={onImageError}
+                  onLoad={onImageLoad}
+                />
+              ) : null}
+
+              {/* Loading state */}
+              {imageLoading && !imageError && (
+                <div
+                  className={`absolute inset-0 bg-gray-200 animate-pulse rounded-full ${config.avatar}`}
+                />
+              )}
+
+              {/* Error state - show initials */}
+              {imageError && (
+                <div
+                  className={`flex items-center justify-center bg-gray-300 rounded-full ${config.avatar} text-gray-600 font-bold`}
+                >
+                  <span className="text-sm md:text-base lg:text-lg xl:text-xl">
+                    {author
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")
+                      .toUpperCase()}
+                  </span>
+                </div>
+              )}
+            </div>
+
+            <blockquote
+              id={quoteId}
+              aria-labelledby={authorId}
+              className="relative"
+            >
+              <p
+                data-qopen="&ldquo;"
+                data-qclose="&rdquo;"
+                className={[
+                  "font-bricolage-grotesque font-normal",
+                  config.quote,
+                  "text-[var(--color-content-inverse-primary)]",
+                  // give space for the hanging open-quote so it's not clipped:
+                  "pl-[0.6em] -indent-[0.6em]",
+                  // inject quotes
+                  "relative before:content-[attr(data-qopen)] after:content-[attr(data-qclose)]",
+                  // lock quote glyphs to your display face
+                  "before:[font-family:var(--font-bricolage-grotesque)]",
+                  "after:[font-family:var(--font-bricolage-grotesque)]",
+                ].join(" ")}
+              >
+                {quote}
+              </p>
+            </blockquote>
+          </div>
+          <footer className="flex flex-col gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-012)] xl:gap-[var(--spacing-scale-020)]">
+            <cite
+              id={authorId}
+              className={`font-inter font-normal ${config.author} text-[var(--color-content-inverse-primary)] uppercase not-italic`}
+            >
+              {author}
+            </cite>
+            {source && (
+              <p
+                data-qopen="&ldquo;"
+                data-qclose="&rdquo;"
+                className={[
+                  "font-inter font-normal",
+                  config.source,
+                  "text-[var(--color-content-inverse-primary)] uppercase",
+                  "pl-[0.6em] -indent-[0.6em]",
+                  "relative before:content-[attr(data-qopen)] after:content-[attr(data-qclose)]",
+                  "before:[font-family:var(--font-inter)] after:[font-family:var(--font-inter)]",
+                ].join(" ")}
+              >
+                {source}
+              </p>
+            )}
+          </footer>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+QuoteBlockView.displayName = "QuoteBlockView";
+
+export default memo(QuoteBlockView);
diff --git a/app/components/QuoteBlock/index.tsx b/app/components/QuoteBlock/index.tsx
new file mode 100644
index 0000000..1858882
--- /dev/null
+++ b/app/components/QuoteBlock/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./QuoteBlock.container";
+export type { QuoteBlockProps } from "./QuoteBlock.types";
diff --git a/app/components/QuoteDecor.tsx b/app/components/QuoteDecor.tsx
index 5e24502..a1d16dd 100644
--- a/app/components/QuoteDecor.tsx
+++ b/app/components/QuoteDecor.tsx
@@ -9,11 +9,12 @@ interface QuoteDecorProps {
 const QuoteDecor = memo<QuoteDecorProps>(({ className = "" }) => {
   return (
     <svg
-      className={`text-[var(--color-surface-inverse-brand-primary)] opacity-100 w-full h-full md:max-w-[640px] lg:max-w-[850px] xl:max-w-[1100px] ${className}`}
+      className={`text-[var(--color-surface-inverse-brand-primary)] opacity-100 ${className}`}
       viewBox="400 0 442 163"
       aria-hidden="true"
       overflow="visible"
       preserveAspectRatio="xMinYMin meet"
+      style={{ width: "100%", height: "100%" }}
     >
       <g fill="currentColor">
         {/* Mobile ellipses */}
diff --git a/app/components/RadioButton.tsx b/app/components/RadioButton/RadioButton.container.tsx
similarity index 56%
rename from app/components/RadioButton.tsx
rename to app/components/RadioButton/RadioButton.container.tsx
index b9ebdfa..42befda 100644
--- a/app/components/RadioButton.tsx
+++ b/app/components/RadioButton/RadioButton.container.tsx
@@ -1,22 +1,10 @@
 "use client";
 
 import { memo, useCallback, useId } from "react";
+import { RadioButtonView } from "./RadioButton.view";
+import type { RadioButtonProps } from "./RadioButton.types";
 
-interface RadioButtonProps {
-  checked?: boolean;
-  mode?: "standard" | "inverse";
-  state?: "default" | "hover" | "focus";
-  disabled?: boolean;
-  label?: string;
-  onChange?: (_data: { checked: boolean; value?: string }) => void;
-  id?: string;
-  name?: string;
-  value?: string;
-  ariaLabel?: string;
-  className?: string;
-}
-
-const RadioButton = ({
+const RadioButtonContainer = ({
   checked = false,
   mode = "standard",
   state = "default",
@@ -91,67 +79,39 @@ const RadioButton = ({
     [disabled, onChange, checked, value],
   );
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      handleToggle(e);
+    }
+  };
+
   return (
-    <label
-      className={`inline-flex items-center gap-[8px] cursor-pointer select-none ${
-        disabled ? "opacity-60 cursor-not-allowed" : ""
-      } ${className}`}
-      onMouseDown={(e) => e.preventDefault()}
-      onClick={handleToggle}
-    >
-      <span
-        onKeyDown={(e) => {
-          if (e.key === " " || e.key === "Enter") {
-            e.preventDefault();
-            handleToggle(e);
-          }
-        }}
-        className={`${combinedBoxStyles} ${defaultOutlineClass} ${conditionalHoverOutlineClass} ${conditionalFocusClass} p-[var(--measures-spacing-004)]`}
-        style={{
-          backgroundColor: backgroundWhenChecked,
-        }}
-        tabIndex={0}
-        role="radio"
-        aria-checked={checked}
-        {...(disabled && { "aria-disabled": true })}
-        {...(ariaLabel && { "aria-label": ariaLabel })}
-        {...(label && !ariaLabel && { "aria-labelledby": `${radioId}-label` })}
-        id={radioId}
-      >
-        {/* Radio dot */}
-        <div
-          className="w-[16px] h-[16px] rounded-full transition-all duration-200"
-          style={{
-            backgroundColor: dotColor,
-          }}
-        />
-      </span>
-      {label && (
-        <span
-          id={`${radioId}-label`}
-          className="font-inter text-[14px] leading-[18px]"
-          style={{ color: labelColor }}
-        >
-          {label}
-        </span>
-      )}
-      {/* Hidden input for form submission */}
-      <input
-        type="radio"
-        name={name}
-        value={value}
-        checked={checked}
-        onChange={() => {}}
-        disabled={disabled}
-        className="sr-only"
-        tabIndex={-1}
-        aria-hidden="true"
-        {...props}
-      />
-    </label>
+    <RadioButtonView
+      radioId={radioId}
+      checked={checked}
+      mode={mode}
+      state={state}
+      disabled={disabled}
+      label={label}
+      name={name}
+      value={value}
+      ariaLabel={ariaLabel}
+      className={className}
+      combinedBoxStyles={combinedBoxStyles}
+      defaultOutlineClass={defaultOutlineClass}
+      conditionalHoverOutlineClass={conditionalHoverOutlineClass}
+      conditionalFocusClass={conditionalFocusClass}
+      backgroundWhenChecked={backgroundWhenChecked}
+      dotColor={dotColor}
+      labelColor={labelColor}
+      onToggle={handleToggle}
+      onKeyDown={handleKeyDown}
+      {...props}
+    />
   );
 };
 
-RadioButton.displayName = "RadioButton";
+RadioButtonContainer.displayName = "RadioButton";
 
-export default memo(RadioButton);
+export default memo(RadioButtonContainer);
diff --git a/app/components/RadioButton/RadioButton.types.ts b/app/components/RadioButton/RadioButton.types.ts
new file mode 100644
index 0000000..0cfd80d
--- /dev/null
+++ b/app/components/RadioButton/RadioButton.types.ts
@@ -0,0 +1,35 @@
+export interface RadioButtonProps {
+  checked?: boolean;
+  mode?: "standard" | "inverse";
+  state?: "default" | "hover" | "focus";
+  disabled?: boolean;
+  label?: string;
+  onChange?: (_data: { checked: boolean; value?: string }) => void;
+  id?: string;
+  name?: string;
+  value?: string;
+  ariaLabel?: string;
+  className?: string;
+}
+
+export interface RadioButtonViewProps {
+  radioId: string;
+  checked: boolean;
+  mode: "standard" | "inverse";
+  state: "default" | "hover" | "focus";
+  disabled: boolean;
+  label?: string;
+  name?: string;
+  value?: string;
+  ariaLabel?: string;
+  className: string;
+  combinedBoxStyles: string;
+  defaultOutlineClass: string;
+  conditionalHoverOutlineClass: string;
+  conditionalFocusClass: string;
+  backgroundWhenChecked: string;
+  dotColor: string;
+  labelColor: string;
+  onToggle: (_e: React.MouseEvent | React.KeyboardEvent) => void;
+  onKeyDown: (_e: React.KeyboardEvent<HTMLSpanElement>) => void;
+}
diff --git a/app/components/RadioButton/RadioButton.view.tsx b/app/components/RadioButton/RadioButton.view.tsx
new file mode 100644
index 0000000..0d73dca
--- /dev/null
+++ b/app/components/RadioButton/RadioButton.view.tsx
@@ -0,0 +1,77 @@
+import type { RadioButtonViewProps } from "./RadioButton.types";
+
+export function RadioButtonView({
+  radioId,
+  checked,
+  disabled,
+  label,
+  name,
+  value,
+  ariaLabel,
+  className,
+  combinedBoxStyles,
+  defaultOutlineClass,
+  conditionalHoverOutlineClass,
+  conditionalFocusClass,
+  backgroundWhenChecked,
+  dotColor,
+  labelColor,
+  onToggle,
+  onKeyDown,
+  ...props
+}: RadioButtonViewProps) {
+  return (
+    <label
+      className={`inline-flex items-center gap-[8px] cursor-pointer select-none ${
+        disabled ? "opacity-60 cursor-not-allowed" : ""
+      } ${className}`}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={onToggle}
+    >
+      <span
+        onKeyDown={onKeyDown}
+        className={`${combinedBoxStyles} ${defaultOutlineClass} ${conditionalHoverOutlineClass} ${conditionalFocusClass} p-[var(--measures-spacing-004)]`}
+        style={{
+          backgroundColor: backgroundWhenChecked,
+        }}
+        tabIndex={0}
+        role="radio"
+        aria-checked={checked}
+        {...(disabled && { "aria-disabled": true })}
+        {...(ariaLabel && { "aria-label": ariaLabel })}
+        {...(label && !ariaLabel && { "aria-labelledby": `${radioId}-label` })}
+        id={radioId}
+        {...props}
+      >
+        {/* Radio dot */}
+        <div
+          className="w-[16px] h-[16px] rounded-full transition-all duration-200"
+          style={{
+            backgroundColor: dotColor,
+          }}
+        />
+      </span>
+      {label && (
+        <span
+          id={`${radioId}-label`}
+          className="font-inter text-[14px] leading-[18px]"
+          style={{ color: labelColor }}
+        >
+          {label}
+        </span>
+      )}
+      {/* Hidden input for form submission */}
+      <input
+        type="radio"
+        name={name}
+        value={value}
+        checked={checked}
+        onChange={() => {}}
+        disabled={disabled}
+        className="sr-only"
+        tabIndex={-1}
+        aria-hidden="true"
+      />
+    </label>
+  );
+}
diff --git a/app/components/RadioButton/index.tsx b/app/components/RadioButton/index.tsx
new file mode 100644
index 0000000..223bf27
--- /dev/null
+++ b/app/components/RadioButton/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./RadioButton.container";
+export type { RadioButtonProps } from "./RadioButton.types";
diff --git a/app/components/RadioGroup.tsx b/app/components/RadioGroup.tsx
deleted file mode 100644
index c8d3cb1..0000000
--- a/app/components/RadioGroup.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-"use client";
-
-import { memo, useCallback, useId } from "react";
-import RadioButton from "./RadioButton";
-
-interface RadioOption {
-  value: string;
-  label: string;
-  ariaLabel?: string;
-}
-
-interface RadioGroupProps {
-  name?: string;
-  value?: string;
-  onChange?: (_data: { value: string }) => void;
-  mode?: "standard" | "inverse";
-  state?: "default" | "hover" | "focus";
-  disabled?: boolean;
-  options?: RadioOption[];
-  className?: string;
-  "aria-label"?: string;
-}
-
-const RadioGroup = ({
-  name,
-  value,
-  onChange,
-  mode = "standard",
-  state = "default",
-  disabled = false,
-  options = [],
-  className = "",
-  ...props
-}: RadioGroupProps) => {
-  // Generate unique ID for accessibility if not provided
-  const generatedId = useId();
-  const groupId = name || `radio-group-${generatedId}`;
-
-  const handleChange = useCallback(
-    (optionValue: string) => {
-      if (!disabled && onChange) {
-        onChange({ value: optionValue });
-      }
-    },
-    [disabled, onChange],
-  );
-
-  return (
-    <div
-      className={`space-y-[8px] ${className}`}
-      role="radiogroup"
-      aria-label={props["aria-label"]}
-      {...props}
-    >
-      {options.map((option) => {
-        const isSelected = value === option.value;
-
-        return (
-          <RadioButton
-            key={option.value}
-            checked={isSelected}
-            mode={mode}
-            state={state}
-            disabled={disabled}
-            label={option.label}
-            name={groupId}
-            value={option.value}
-            ariaLabel={option.ariaLabel}
-            onChange={({ checked }) => {
-              if (checked) {
-                handleChange(option.value);
-              }
-            }}
-          />
-        );
-      })}
-    </div>
-  );
-};
-
-RadioGroup.displayName = "RadioGroup";
-
-export default memo(RadioGroup);
diff --git a/app/components/RadioGroup/RadioGroup.container.tsx b/app/components/RadioGroup/RadioGroup.container.tsx
new file mode 100644
index 0000000..c31689f
--- /dev/null
+++ b/app/components/RadioGroup/RadioGroup.container.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { memo, useCallback, useId } from "react";
+import { RadioGroupView } from "./RadioGroup.view";
+import type { RadioGroupProps } from "./RadioGroup.types";
+
+const RadioGroupContainer = ({
+  name,
+  value,
+  onChange,
+  mode = "standard",
+  state = "default",
+  disabled = false,
+  options = [],
+  className = "",
+  ...props
+}: RadioGroupProps) => {
+  // Generate unique ID for accessibility if not provided
+  const generatedId = useId();
+  const groupId = name || `radio-group-${generatedId}`;
+
+  const handleChange = useCallback(
+    (optionValue: string) => {
+      if (!disabled && onChange) {
+        onChange({ value: optionValue });
+      }
+    },
+    [disabled, onChange],
+  );
+
+  return (
+    <RadioGroupView
+      groupId={groupId}
+      value={value}
+      mode={mode}
+      state={state}
+      disabled={disabled}
+      options={options}
+      className={className}
+      ariaLabel={props["aria-label"]}
+      onOptionChange={handleChange}
+    />
+  );
+};
+
+RadioGroupContainer.displayName = "RadioGroup";
+
+export default memo(RadioGroupContainer);
diff --git a/app/components/RadioGroup/RadioGroup.types.ts b/app/components/RadioGroup/RadioGroup.types.ts
new file mode 100644
index 0000000..c3d5aef
--- /dev/null
+++ b/app/components/RadioGroup/RadioGroup.types.ts
@@ -0,0 +1,29 @@
+export interface RadioOption {
+  value: string;
+  label: string;
+  ariaLabel?: string;
+}
+
+export interface RadioGroupProps {
+  name?: string;
+  value?: string;
+  onChange?: (_data: { value: string }) => void;
+  mode?: "standard" | "inverse";
+  state?: "default" | "hover" | "focus";
+  disabled?: boolean;
+  options?: RadioOption[];
+  className?: string;
+  "aria-label"?: string;
+}
+
+export interface RadioGroupViewProps {
+  groupId: string;
+  value?: string;
+  mode: "standard" | "inverse";
+  state: "default" | "hover" | "focus";
+  disabled: boolean;
+  options: RadioOption[];
+  className: string;
+  ariaLabel?: string;
+  onOptionChange: (_optionValue: string) => void;
+}
diff --git a/app/components/RadioGroup/RadioGroup.view.tsx b/app/components/RadioGroup/RadioGroup.view.tsx
new file mode 100644
index 0000000..aef4b30
--- /dev/null
+++ b/app/components/RadioGroup/RadioGroup.view.tsx
@@ -0,0 +1,45 @@
+import RadioButton from "../RadioButton";
+import type { RadioGroupViewProps } from "./RadioGroup.types";
+
+export function RadioGroupView({
+  groupId,
+  value,
+  mode,
+  state,
+  disabled,
+  options,
+  className,
+  ariaLabel,
+  onOptionChange,
+}: RadioGroupViewProps) {
+  return (
+    <div
+      className={`space-y-[8px] ${className}`}
+      role="radiogroup"
+      aria-label={ariaLabel}
+    >
+      {options.map((option) => {
+        const isSelected = value === option.value;
+
+        return (
+          <RadioButton
+            key={option.value}
+            checked={isSelected}
+            mode={mode}
+            state={state}
+            disabled={disabled}
+            label={option.label}
+            name={groupId}
+            value={option.value}
+            ariaLabel={option.ariaLabel}
+            onChange={({ checked }) => {
+              if (checked) {
+                onOptionChange(option.value);
+              }
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}
diff --git a/app/components/RadioGroup/index.tsx b/app/components/RadioGroup/index.tsx
new file mode 100644
index 0000000..435a6ae
--- /dev/null
+++ b/app/components/RadioGroup/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./RadioGroup.container";
+export type { RadioGroupProps, RadioOption } from "./RadioGroup.types";
diff --git a/app/components/RelatedArticles.tsx b/app/components/RelatedArticles/RelatedArticles.container.tsx
similarity index 51%
rename from app/components/RelatedArticles.tsx
rename to app/components/RelatedArticles/RelatedArticles.container.tsx
index 791b47f..b0fe4bd 100644
--- a/app/components/RelatedArticles.tsx
+++ b/app/components/RelatedArticles/RelatedArticles.container.tsx
@@ -1,17 +1,11 @@
 "use client";
 
 import { useState, useEffect, memo, useMemo, useCallback } from "react";
-import ContentThumbnailTemplate from "./ContentThumbnailTemplate";
-import type { BlogPost } from "../../lib/content";
-import { useIsMobile } from "../hooks";
+import { useIsMobile } from "../../hooks";
+import { RelatedArticlesView } from "./RelatedArticles.view";
+import type { RelatedArticlesProps } from "./RelatedArticles.types";
 
-interface RelatedArticlesProps {
-  relatedPosts: BlogPost[];
-  currentPostSlug: string;
-  slugOrder?: string[];
-}
-
-const RelatedArticles = memo<RelatedArticlesProps>(
+const RelatedArticlesContainer = memo<RelatedArticlesProps>(
   ({ relatedPosts, currentPostSlug, slugOrder = [] }) => {
     // Memoize filtered posts to prevent unnecessary re-computations
     const filteredPosts = useMemo(
@@ -73,8 +67,6 @@ const RelatedArticles = memo<RelatedArticlesProps>(
       [currentIndex, progress],
     );
 
-    // Mobile detection is now handled by useIsMobile hook
-
     // Auto-advance every 3 seconds (only on mobile)
     useEffect(() => {
       if (filteredPosts.length <= 1 || !isMobile) return;
@@ -103,69 +95,19 @@ const RelatedArticles = memo<RelatedArticlesProps>(
       return () => clearInterval(progressInterval);
     }, [currentIndex, filteredPosts.length, isMobile]);
 
-    if (filteredPosts.length === 0) {
-      return null;
-    }
-
     return (
-      <section
-        className="py-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)]"
-        data-testid="related-articles"
-      >
-        <div className="flex flex-col gap-[var(--spacing-scale-032)] lg:gap-[51px]">
-          <h2 className="text-[32px] lg:text-[44px] leading-[110%] font-medium text-[var(--color-content-inverse-primary)] text-center">
-            Related Articles
-          </h2>
-
-          {/* Horizontal Articles Row - Carousel on mobile, Scrollable slider on desktop */}
-          <div className="flex justify-center overflow-hidden">
-            <div
-              className={`flex gap-0 transition-transform duration-500 ease-in-out ${
-                !isMobile
-                  ? "overflow-x-auto scrollbar-hide cursor-grab active:cursor-grabbing"
-                  : ""
-              }`}
-              style={transformStyle}
-              onMouseDown={!isMobile ? handleMouseDown : undefined}
-            >
-              {filteredPosts.map((relatedPost) => (
-                <div
-                  key={relatedPost.slug}
-                  className="flex flex-col items-center flex-shrink-0"
-                  data-testid={`related-${relatedPost.slug}`}
-                >
-                  <ContentThumbnailTemplate
-                    post={relatedPost}
-                    variant="vertical"
-                    slugOrder={slugOrder}
-                  />
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Progress bars - only show on mobile */}
-          {isMobile && (
-            <div className="flex justify-center gap-[var(--measures-spacing-008)] px-[var(--measures-spacing-064)]">
-              {filteredPosts.map((relatedPost, index) => (
-                <div
-                  key={relatedPost.slug}
-                  className="max-w-[var(--measures-spacing-056)] w-full h-[var(--measures-spacing-004)] bg-gray-200 rounded-full overflow-hidden"
-                >
-                  <div
-                    className="h-full bg-gray-600 rounded-full transition-all duration-75 ease-linear"
-                    style={getProgressStyle(index)}
-                  />
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </section>
+      <RelatedArticlesView
+        filteredPosts={filteredPosts}
+        slugOrder={slugOrder}
+        isMobile={isMobile}
+        transformStyle={transformStyle}
+        getProgressStyle={getProgressStyle}
+        onMouseDown={handleMouseDown}
+      />
     );
   },
 );
 
-RelatedArticles.displayName = "RelatedArticles";
+RelatedArticlesContainer.displayName = "RelatedArticles";
 
-export default RelatedArticles;
+export default RelatedArticlesContainer;
diff --git a/app/components/RelatedArticles/RelatedArticles.types.ts b/app/components/RelatedArticles/RelatedArticles.types.ts
new file mode 100644
index 0000000..b7d3878
--- /dev/null
+++ b/app/components/RelatedArticles/RelatedArticles.types.ts
@@ -0,0 +1,16 @@
+import type { BlogPost } from "../../../lib/content";
+
+export interface RelatedArticlesProps {
+  relatedPosts: BlogPost[];
+  currentPostSlug: string;
+  slugOrder?: string[];
+}
+
+export interface RelatedArticlesViewProps {
+  filteredPosts: BlogPost[];
+  slugOrder: string[];
+  isMobile: boolean;
+  transformStyle: React.CSSProperties;
+  getProgressStyle: (_index: number) => React.CSSProperties;
+  onMouseDown?: (_e: React.MouseEvent<HTMLDivElement>) => void;
+}
diff --git a/app/components/RelatedArticles/RelatedArticles.view.tsx b/app/components/RelatedArticles/RelatedArticles.view.tsx
new file mode 100644
index 0000000..ede0e27
--- /dev/null
+++ b/app/components/RelatedArticles/RelatedArticles.view.tsx
@@ -0,0 +1,72 @@
+import ContentThumbnailTemplate from "../ContentThumbnailTemplate";
+import type { RelatedArticlesViewProps } from "./RelatedArticles.types";
+
+export function RelatedArticlesView({
+  filteredPosts,
+  slugOrder,
+  isMobile,
+  transformStyle,
+  getProgressStyle,
+  onMouseDown,
+}: RelatedArticlesViewProps) {
+  if (filteredPosts.length === 0) {
+    return null;
+  }
+
+  return (
+    <section
+      className="py-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)]"
+      data-testid="related-articles"
+    >
+      <div className="flex flex-col gap-[var(--spacing-scale-032)] lg:gap-[51px]">
+        <h2 className="text-[32px] lg:text-[44px] leading-[110%] font-medium text-[var(--color-content-inverse-primary)] text-center">
+          Related Articles
+        </h2>
+
+        {/* Horizontal Articles Row - Carousel on mobile, Scrollable slider on desktop */}
+        <div className="flex justify-center overflow-hidden">
+          <div
+            className={`flex gap-0 transition-transform duration-500 ease-in-out ${
+              !isMobile
+                ? "overflow-x-auto scrollbar-hide cursor-grab active:cursor-grabbing"
+                : ""
+            }`}
+            style={transformStyle}
+            onMouseDown={!isMobile ? onMouseDown : undefined}
+          >
+            {filteredPosts.map((relatedPost) => (
+              <div
+                key={relatedPost.slug}
+                className="flex flex-col items-center flex-shrink-0"
+                data-testid={`related-${relatedPost.slug}`}
+              >
+                <ContentThumbnailTemplate
+                  post={relatedPost}
+                  variant="vertical"
+                  slugOrder={slugOrder}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Progress bars - only show on mobile */}
+        {isMobile && (
+          <div className="flex justify-center gap-[var(--measures-spacing-008)] px-[var(--measures-spacing-064)]">
+            {filteredPosts.map((relatedPost, index) => (
+              <div
+                key={relatedPost.slug}
+                className="max-w-[var(--measures-spacing-056)] w-full h-[var(--measures-spacing-004)] bg-gray-200 rounded-full overflow-hidden"
+              >
+                <div
+                  className="h-full bg-gray-600 rounded-full transition-all duration-75 ease-linear"
+                  style={getProgressStyle(index)}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/RelatedArticles/index.tsx b/app/components/RelatedArticles/index.tsx
new file mode 100644
index 0000000..4839736
--- /dev/null
+++ b/app/components/RelatedArticles/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./RelatedArticles.container";
+export type { RelatedArticlesProps } from "./RelatedArticles.types";
diff --git a/app/components/RuleCard.tsx b/app/components/RuleCard.tsx
deleted file mode 100644
index d63c1d5..0000000
--- a/app/components/RuleCard.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"use client";
-
-import { memo } from "react";
-
-interface RuleCardProps {
-  title: string;
-  description?: string;
-  icon?: React.ReactNode;
-  backgroundColor?: string;
-  className?: string;
-  onClick?: () => void;
-}
-
-declare global {
-  interface Window {
-    gtag?: (
-      _command: string,
-      _eventName: string,
-      _params?: Record<string, unknown>,
-    ) => void;
-    analytics?: {
-      track: (_eventName: string, _params?: Record<string, unknown>) => void;
-    };
-  }
-}
-
-const RuleCard = memo<RuleCardProps>(
-  ({
-    title,
-    description,
-    icon,
-    backgroundColor = "bg-[var(--color-community-teal-100)]",
-    className = "",
-    onClick,
-  }) => {
-    const handleClick = () => {
-      // Basic analytics event tracking
-      if (typeof window !== "undefined" && window.gtag) {
-        window.gtag("event", "template_selected", {
-          template_name: title,
-          template_type: "governance_pattern",
-        });
-      }
-
-      // Custom analytics event for other tracking systems
-      if (typeof window !== "undefined" && window.analytics) {
-        window.analytics.track("Template Selected", {
-          templateName: title,
-          templateType: "governance_pattern",
-        });
-      }
-
-      if (onClick) onClick();
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        handleClick();
-      }
-    };
-
-    return (
-      <div
-        className={`${backgroundColor} rounded-[var(--radius-measures-radius-small)] pt-[var(--spacing-scale-012)] pr-[var(--spacing-scale-012)] pl-[var(--spacing-scale-012)] pb-[var(--spacing-scale-024)] md:p-[var(--spacing-scale-024)] md:h-[210px] lg:h-[277px] flex flex-col gap-[18px] shadow-lg backdrop-blur-sm transition-all duration-500 ease-in-out hover:shadow-xl hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-[var(--color-community-teal-500)] focus:ring-offset-2 cursor-pointer min-h-[44px] min-w-[44px] ${className}`}
-        tabIndex={0}
-        role="button"
-        aria-label={`Learn more about ${title} governance pattern`}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-      >
-        {/* Header Container */}
-        <div className="grid grid-cols-[auto_1fr] h-[72px] md:h-[80px] lg:h-[138px] border-b border-[var(--color-surface-default-primary)]">
-          {/* Icon Container */}
-          {icon && (
-            <div className="p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-012)] lg:p-[var(--spacing-scale-024)] border-r border-[var(--color-surface-default-primary)] w-fit flex items-center justify-center">
-              {icon}
-            </div>
-          )}
-          {/* Title Container */}
-          {title && (
-            <div className="pl-[var(--spacing-scale-008)] md:pl-[var(--spacing-scale-012)] lg:pl-[var(--spacing-scale-024)] flex items-center gap-[var(--spacing-scale-004)]">
-              <h3 className="font-space-grotesk font-bold text-[20px] md:text-[28px] lg:text-[36px] leading-[28px] md:leading-[36px] lg:leading-[44px] text-[--color-content-inverse-primary]">
-                {title}
-              </h3>
-            </div>
-          )}
-        </div>
-        {description && (
-          <p className="font-inter font-medium text-[12px] md:text-[14px] lg:text-[18px] leading-[14px] md:leading-[16px] lg:leading-[24px] text-[var(--color-content-inverse-primary)]">
-            {description}
-          </p>
-        )}
-      </div>
-    );
-  },
-);
-
-RuleCard.displayName = "RuleCard";
-
-export default RuleCard;
diff --git a/app/components/RuleCard/RuleCard.container.tsx b/app/components/RuleCard/RuleCard.container.tsx
new file mode 100644
index 0000000..fdfaa6f
--- /dev/null
+++ b/app/components/RuleCard/RuleCard.container.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { memo } from "react";
+import { RuleCardView } from "./RuleCard.view";
+import type { RuleCardProps } from "./RuleCard.types";
+
+declare global {
+  interface Window {
+    gtag?: (
+      _command: string,
+      _eventName: string,
+      _params?: Record<string, unknown>,
+    ) => void;
+    analytics?: {
+      track: (_eventName: string, _params?: Record<string, unknown>) => void;
+    };
+  }
+}
+
+const RuleCardContainer = memo<RuleCardProps>(
+  ({
+    title,
+    description,
+    icon,
+    backgroundColor = "bg-[var(--color-community-teal-100)]",
+    className = "",
+    onClick,
+  }) => {
+    const handleClick = () => {
+      // Basic analytics event tracking
+      if (typeof window !== "undefined" && window.gtag) {
+        window.gtag("event", "template_selected", {
+          template_name: title,
+          template_type: "governance_pattern",
+        });
+      }
+
+      // Custom analytics event for other tracking systems
+      if (typeof window !== "undefined" && window.analytics) {
+        window.analytics.track("Template Selected", {
+          templateName: title,
+          templateType: "governance_pattern",
+        });
+      }
+
+      if (onClick) onClick();
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    };
+
+    return (
+      <RuleCardView
+        title={title}
+        description={description}
+        icon={icon}
+        backgroundColor={backgroundColor}
+        className={className}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+      />
+    );
+  },
+);
+
+RuleCardContainer.displayName = "RuleCard";
+
+export default RuleCardContainer;
diff --git a/app/components/RuleCard/RuleCard.types.ts b/app/components/RuleCard/RuleCard.types.ts
new file mode 100644
index 0000000..9776e18
--- /dev/null
+++ b/app/components/RuleCard/RuleCard.types.ts
@@ -0,0 +1,18 @@
+export interface RuleCardProps {
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+  backgroundColor?: string;
+  className?: string;
+  onClick?: () => void;
+}
+
+export interface RuleCardViewProps {
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+  backgroundColor: string;
+  className: string;
+  onClick: () => void;
+  onKeyDown: (_event: React.KeyboardEvent<HTMLDivElement>) => void;
+}
diff --git a/app/components/RuleCard/RuleCard.view.tsx b/app/components/RuleCard/RuleCard.view.tsx
new file mode 100644
index 0000000..9cbce2d
--- /dev/null
+++ b/app/components/RuleCard/RuleCard.view.tsx
@@ -0,0 +1,45 @@
+import type { RuleCardViewProps } from "./RuleCard.types";
+
+export function RuleCardView({
+  title,
+  description,
+  icon,
+  backgroundColor,
+  className,
+  onClick,
+  onKeyDown,
+}: RuleCardViewProps) {
+  return (
+    <div
+      className={`${backgroundColor} rounded-[var(--radius-measures-radius-small)] pt-[var(--spacing-scale-012)] pr-[var(--spacing-scale-012)] pl-[var(--spacing-scale-012)] pb-[var(--spacing-scale-024)] md:p-[var(--spacing-scale-024)] md:h-[210px] lg:h-[277px] flex flex-col gap-[18px] shadow-lg backdrop-blur-sm transition-all duration-500 ease-in-out hover:shadow-xl hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-[var(--color-community-teal-500)] focus:ring-offset-2 cursor-pointer min-h-[44px] min-w-[44px] ${className}`}
+      tabIndex={0}
+      role="button"
+      aria-label={`Learn more about ${title} governance pattern`}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+    >
+      {/* Header Container */}
+      <div className="grid grid-cols-[auto_1fr] h-[72px] md:h-[80px] lg:h-[138px] border-b border-[var(--color-surface-default-primary)]">
+        {/* Icon Container */}
+        {icon && (
+          <div className="p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-012)] lg:p-[var(--spacing-scale-024)] border-r border-[var(--color-surface-default-primary)] w-fit flex items-center justify-center">
+            {icon}
+          </div>
+        )}
+        {/* Title Container */}
+        {title && (
+          <div className="pl-[var(--spacing-scale-008)] md:pl-[var(--spacing-scale-012)] lg:pl-[var(--spacing-scale-024)] flex items-center gap-[var(--spacing-scale-004)]">
+            <h3 className="font-space-grotesk font-bold text-[20px] md:text-[28px] lg:text-[36px] leading-[28px] md:leading-[36px] lg:leading-[44px] text-[--color-content-inverse-primary]">
+              {title}
+            </h3>
+          </div>
+        )}
+      </div>
+      {description && (
+        <p className="font-inter font-medium text-[12px] md:text-[14px] lg:text-[18px] leading-[14px] md:leading-[16px] lg:leading-[24px] text-[var(--color-content-inverse-primary)]">
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/RuleCard/index.tsx b/app/components/RuleCard/index.tsx
new file mode 100644
index 0000000..7a8db96
--- /dev/null
+++ b/app/components/RuleCard/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./RuleCard.container";
+export type { RuleCardProps } from "./RuleCard.types";
diff --git a/app/components/RuleStack/RuleStack.container.tsx b/app/components/RuleStack/RuleStack.container.tsx
new file mode 100644
index 0000000..f3e535f
--- /dev/null
+++ b/app/components/RuleStack/RuleStack.container.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { memo } from "react";
+import { logger } from "../../../lib/logger";
+import { RuleStackView } from "./RuleStack.view";
+import type { RuleStackProps } from "./RuleStack.types";
+
+declare global {
+  interface Window {
+    gtag?: (
+      _command: string,
+      _eventName: string,
+      _params?: Record<string, unknown>,
+    ) => void;
+    analytics?: {
+      track: (_eventName: string, _params?: Record<string, unknown>) => void;
+    };
+  }
+}
+
+const RuleStackContainer = memo<RuleStackProps>(({ className = "" }) => {
+  const handleTemplateClick = (templateName: string) => {
+    // Basic analytics tracking
+    if (typeof window !== "undefined") {
+      if (window.gtag) {
+        window.gtag("event", "template_click", {
+          template_name: templateName,
+        });
+      }
+      if (window.analytics) {
+        window.analytics.track("Template Clicked", {
+          templateName: templateName,
+        });
+      }
+    }
+    logger.debug(`${templateName} template clicked`);
+  };
+
+  return (
+    <RuleStackView
+      className={className}
+      onTemplateClick={handleTemplateClick}
+    />
+  );
+});
+
+RuleStackContainer.displayName = "RuleStack";
+
+export default RuleStackContainer;
diff --git a/app/components/RuleStack/RuleStack.types.ts b/app/components/RuleStack/RuleStack.types.ts
new file mode 100644
index 0000000..fd635c1
--- /dev/null
+++ b/app/components/RuleStack/RuleStack.types.ts
@@ -0,0 +1,8 @@
+export interface RuleStackProps {
+  className?: string;
+}
+
+export interface RuleStackViewProps {
+  className: string;
+  onTemplateClick: (_templateName: string) => void;
+}
diff --git a/app/components/RuleStack.tsx b/app/components/RuleStack/RuleStack.view.tsx
similarity index 68%
rename from app/components/RuleStack.tsx
rename to app/components/RuleStack/RuleStack.view.tsx
index d56880e..56b393b 100644
--- a/app/components/RuleStack.tsx
+++ b/app/components/RuleStack/RuleStack.view.tsx
@@ -1,47 +1,13 @@
-"use client";
-
-import { memo } from "react";
 import Image from "next/image";
-import RuleCard from "./RuleCard";
-import Button from "./Button";
-import { getAssetPath } from "../../lib/assetUtils";
-import { logger } from "../../lib/logger";
-
-interface RuleStackProps {
-  className?: string;
-}
-
-declare global {
-  interface Window {
-    gtag?: (
-      _command: string,
-      _eventName: string,
-      _params?: Record<string, unknown>,
-    ) => void;
-    analytics?: {
-      track: (_eventName: string, _params?: Record<string, unknown>) => void;
-    };
-  }
-}
-
-const RuleStack = memo<RuleStackProps>(({ className = "" }) => {
-  const handleTemplateClick = (templateName: string) => {
-    // Basic analytics tracking
-    if (typeof window !== "undefined") {
-      if (window.gtag) {
-        window.gtag("event", "template_click", {
-          template_name: templateName,
-        });
-      }
-      if (window.analytics) {
-        window.analytics.track("Template Clicked", {
-          templateName: templateName,
-        });
-      }
-    }
-    logger.debug(`${templateName} template clicked`);
-  };
+import RuleCard from "../RuleCard";
+import Button from "../Button";
+import { getAssetPath } from "../../../lib/assetUtils";
+import type { RuleStackViewProps } from "./RuleStack.types";
 
+export function RuleStackView({
+  className,
+  onTemplateClick,
+}: RuleStackViewProps) {
   return (
     <section
       className={`w-full bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:py-[var(--spacing-scale-048)] md:px-[var(--spacing-scale-032)] xmd:py-[var(--spacing-scale-056)] xmd:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-064)] xl:px-[var(--spacing-scale-096)] flex flex-col gap-[var(--spacing-scale-024)] xmd:gap-[var(--spacing-scale-032)] lg:gap-[var(--spacing-scale-040)] ${className}`}
@@ -60,7 +26,7 @@ const RuleStack = memo<RuleStackProps>(({ className = "" }) => {
             />
           }
           backgroundColor="bg-[var(--color-surface-default-brand-lime)]"
-          onClick={() => handleTemplateClick("Consensus clusters")}
+          onClick={() => onTemplateClick("Consensus clusters")}
         />
         <RuleCard
           title="Consensus"
@@ -75,7 +41,7 @@ const RuleStack = memo<RuleStackProps>(({ className = "" }) => {
             />
           }
           backgroundColor="bg-[var(--color-surface-default-brand-rust)]"
-          onClick={() => handleTemplateClick("Consensus")}
+          onClick={() => onTemplateClick("Consensus")}
         />
         <RuleCard
           title="Elected Board"
@@ -90,7 +56,7 @@ const RuleStack = memo<RuleStackProps>(({ className = "" }) => {
             />
           }
           backgroundColor="bg-[var(--color-surface-default-brand-red)]"
-          onClick={() => handleTemplateClick("Elected Board")}
+          onClick={() => onTemplateClick("Elected Board")}
         />
         <RuleCard
           title="Petition"
@@ -105,7 +71,7 @@ const RuleStack = memo<RuleStackProps>(({ className = "" }) => {
             />
           }
           backgroundColor="bg-[var(--color-surface-default-brand-teal)]"
-          onClick={() => handleTemplateClick("Petition")}
+          onClick={() => onTemplateClick("Petition")}
         />
       </div>
 
@@ -117,8 +83,4 @@ const RuleStack = memo<RuleStackProps>(({ className = "" }) => {
       </div>
     </section>
   );
-});
-
-RuleStack.displayName = "RuleStack";
-
-export default RuleStack;
+}
diff --git a/app/components/RuleStack/index.tsx b/app/components/RuleStack/index.tsx
new file mode 100644
index 0000000..3cbce32
--- /dev/null
+++ b/app/components/RuleStack/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./RuleStack.container";
+export type { RuleStackProps } from "./RuleStack.types";
diff --git a/app/components/Select.tsx b/app/components/Select/Select.container.tsx
similarity index 62%
rename from app/components/Select.tsx
rename to app/components/Select/Select.container.tsx
index 0f4a608..1fab32c 100644
--- a/app/components/Select.tsx
+++ b/app/components/Select/Select.container.tsx
@@ -11,33 +11,13 @@ import React, {
   useCallback,
   memo,
   useImperativeHandle,
+  useEffect,
 } from "react";
-import { useClickOutside } from "../hooks";
-import SelectDropdown from "./SelectDropdown";
-import SelectOption from "./SelectOption";
+import { useClickOutside } from "../../hooks";
+import { SelectView } from "./Select.view";
+import type { SelectProps } from "./Select.types";
 
-interface SelectOptionData {
-  value: string;
-  label: string;
-}
-
-interface SelectProps {
-  id?: string;
-  label?: string;
-  labelVariant?: "default" | "horizontal";
-  size?: "small" | "medium" | "large";
-  state?: "default" | "hover" | "focus";
-  disabled?: boolean;
-  error?: boolean;
-  placeholder?: string;
-  className?: string;
-  children?: React.ReactNode;
-  value?: string;
-  onChange?: (_data: { target: { value: string; text: string } }) => void;
-  options?: SelectOptionData[];
-}
-
-const Select = forwardRef<HTMLButtonElement, SelectProps>(
+const SelectContainer = forwardRef<HTMLButtonElement, SelectProps>(
   (
     {
       id,
@@ -65,6 +45,14 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
     const selectRef = useRef<HTMLButtonElement>(null);
     const menuRef = useRef<HTMLDivElement>(null);
 
+    // Sync internal state with external value prop
+    useEffect(() => {
+      if (value !== undefined && value !== selectedValue) {
+        setSelectedValue(value);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+
     useImperativeHandle(
       ref,
       () => selectRef.current as HTMLButtonElement | null,
@@ -239,6 +227,12 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
         ? "flex items-center gap-[12px]"
         : "flex flex-col";
 
+    const chevronClasses = `${
+      size === "large" ? "w-5 h-5" : "w-4 h-4"
+    } text-[var(--color-content-default-primary)] transition-transform duration-200 ${
+      isOpen ? "rotate-180" : ""
+    }`;
+
     // Get display text for selected value
     const getDisplayText = (): string => {
       if (!selectedValue) return placeholder;
@@ -273,107 +267,38 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
     };
 
     return (
-      <div className={containerClasses}>
-        {label && (
-          <label
-            id={labelId}
-            htmlFor={selectId}
-            className={`${labelClasses} text-[var(--color-content-default-secondary)]`}
-          >
-            {label}
-          </label>
-        )}
-        <div className="relative">
-          <button
-            ref={selectRef}
-            id={selectId}
-            disabled={disabled}
-            className={selectClasses}
-            aria-labelledby={label ? labelId : undefined}
-            aria-invalid={error}
-            aria-expanded={isOpen}
-            aria-haspopup="listbox"
-            onClick={handleSelectClick}
-            onKeyDown={handleKeyDown}
-            {...props}
-          >
-            <span className="text-left">{getDisplayText()}</span>
-          </button>
-          <div className="absolute inset-y-0 right-0 flex items-center pr-[12px] pointer-events-none">
-            <svg
-              className={`${
-                size === "large" ? "w-5 h-5" : "w-4 h-4"
-              } text-[var(--color-content-default-primary)] transition-transform duration-200 ${
-                isOpen ? "rotate-180" : ""
-              }`}
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M19 9l-7 7-7-7"
-              />
-            </svg>
-          </div>
-
-          {isOpen && (
-            <div
-              ref={menuRef}
-              className="absolute top-full left-0 right-0 z-50 mt-1"
-            >
-              <SelectDropdown>
-                {options && Array.isArray(options)
-                  ? options.map((option) => (
-                      <SelectOption
-                        key={option.value}
-                        selected={option.value === selectedValue}
-                        size={size}
-                        onClick={() =>
-                          handleOptionSelect(option.value, option.label)
-                        }
-                      >
-                        {option.label}
-                      </SelectOption>
-                    ))
-                  : Children.map(children, (child) => {
-                      if (
-                        React.isValidElement(child) &&
-                        child.type === "option"
-                      ) {
-                        const optionProps = child.props as {
-                          value: string;
-                          children: ReactNode;
-                        };
-                        return (
-                          <SelectOption
-                            key={optionProps.value}
-                            selected={optionProps.value === selectedValue}
-                            size={size}
-                            onClick={() =>
-                              handleOptionSelect(
-                                optionProps.value,
-                                String(optionProps.children),
-                              )
-                            }
-                          >
-                            {optionProps.children}
-                          </SelectOption>
-                        );
-                      }
-                      return child;
-                    })}
-              </SelectDropdown>
-            </div>
-          )}
-        </div>
-      </div>
+      <SelectView
+        label={label}
+        placeholder={placeholder}
+        size={size}
+        state={state}
+        disabled={disabled}
+        error={error}
+        labelVariant={labelVariant}
+        className={className}
+        options={options}
+        selectId={selectId}
+        labelId={labelId}
+        isOpen={isOpen}
+        selectedValue={selectedValue}
+        displayText={getDisplayText()}
+        selectClasses={selectClasses}
+        labelClasses={labelClasses}
+        containerClasses={containerClasses}
+        chevronClasses={chevronClasses}
+        onButtonClick={handleSelectClick}
+        onButtonKeyDown={handleKeyDown}
+        onOptionClick={handleOptionSelect}
+        selectRef={selectRef}
+        menuRef={menuRef}
+        ariaLabelledby={label ? labelId : undefined}
+        ariaInvalid={error}
+        {...props}
+      />
     );
   },
 );
 
-Select.displayName = "Select";
+SelectContainer.displayName = "Select";
 
-export default memo(Select);
+export default memo(SelectContainer);
diff --git a/app/components/Select/Select.types.ts b/app/components/Select/Select.types.ts
new file mode 100644
index 0000000..5e082d2
--- /dev/null
+++ b/app/components/Select/Select.types.ts
@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+export interface SelectOptionData {
+  value: string;
+  label: string;
+}
+
+export interface SelectProps {
+  id?: string;
+  label?: string;
+  labelVariant?: "default" | "horizontal";
+  size?: "small" | "medium" | "large";
+  state?: "default" | "hover" | "focus";
+  disabled?: boolean;
+  error?: boolean;
+  placeholder?: string;
+  className?: string;
+  children?: ReactNode;
+  value?: string;
+  onChange?: (_data: { target: { value: string; text: string } }) => void;
+  options?: SelectOptionData[];
+}
diff --git a/app/components/Select/Select.view.tsx b/app/components/Select/Select.view.tsx
new file mode 100644
index 0000000..1c8ad9b
--- /dev/null
+++ b/app/components/Select/Select.view.tsx
@@ -0,0 +1,159 @@
+import React, { Children, type ReactNode } from "react";
+import SelectDropdown from "../SelectDropdown";
+import SelectOption from "../SelectOption";
+import type { SelectOptionData } from "./Select.types";
+
+export interface SelectViewProps {
+  label?: string;
+  placeholder: string;
+  size: "small" | "medium" | "large";
+  state: "default" | "hover" | "focus";
+  disabled: boolean;
+  error: boolean;
+  labelVariant: "default" | "horizontal";
+  className: string;
+  options?: SelectOptionData[];
+  children?: ReactNode;
+  // Computed props from container
+  selectId: string;
+  labelId: string;
+  isOpen: boolean;
+  selectedValue: string;
+  displayText: string;
+  selectClasses: string;
+  labelClasses: string;
+  containerClasses: string;
+  chevronClasses: string;
+  // Callbacks
+  onButtonClick: () => void;
+  onButtonKeyDown: (_e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onOptionClick: (_value: string, _text: string) => void;
+  // Refs
+  selectRef: React.RefObject<HTMLButtonElement>;
+  menuRef: React.RefObject<HTMLDivElement>;
+  // Additional props
+  ariaLabelledby?: string;
+  ariaInvalid?: boolean;
+}
+
+export function SelectView({
+  label,
+  placeholder: _placeholder,
+  size,
+  disabled,
+  error: _error,
+  labelVariant: _labelVariant,
+  options,
+  children,
+  selectId,
+  labelId,
+  isOpen,
+  selectedValue,
+  displayText,
+  selectClasses,
+  labelClasses,
+  containerClasses,
+  chevronClasses,
+  onButtonClick,
+  onButtonKeyDown,
+  onOptionClick,
+  selectRef,
+  menuRef,
+  ariaLabelledby,
+  ariaInvalid,
+  ...props
+}: SelectViewProps) {
+  return (
+    <div className={containerClasses}>
+      {label && (
+        <label
+          id={labelId}
+          htmlFor={selectId}
+          className={`${labelClasses} text-[var(--color-content-default-secondary)]`}
+        >
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        <button
+          ref={selectRef}
+          id={selectId}
+          disabled={disabled}
+          className={selectClasses}
+          aria-labelledby={ariaLabelledby}
+          aria-invalid={ariaInvalid}
+          aria-expanded={isOpen}
+          aria-haspopup="listbox"
+          onClick={onButtonClick}
+          onKeyDown={onButtonKeyDown}
+          {...props}
+        >
+          <span className="text-left">{displayText}</span>
+        </button>
+        <div className="absolute inset-y-0 right-0 flex items-center pr-[12px] pointer-events-none">
+          <svg
+            className={chevronClasses}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </div>
+
+        {isOpen && (
+          <div
+            ref={menuRef}
+            className="absolute top-full left-0 right-0 z-50 mt-1"
+          >
+            <SelectDropdown>
+              {options && Array.isArray(options)
+                ? options.map((option) => (
+                    <SelectOption
+                      key={option.value}
+                      selected={option.value === selectedValue}
+                      size={size}
+                      onClick={() => onOptionClick(option.value, option.label)}
+                    >
+                      {option.label}
+                    </SelectOption>
+                  ))
+                : Children.map(children, (child) => {
+                    if (
+                      React.isValidElement(child) &&
+                      child.type === "option"
+                    ) {
+                      const optionProps = child.props as {
+                        value: string;
+                        children: ReactNode;
+                      };
+                      return (
+                        <SelectOption
+                          key={optionProps.value}
+                          selected={optionProps.value === selectedValue}
+                          size={size}
+                          onClick={() =>
+                            onOptionClick(
+                              optionProps.value,
+                              String(optionProps.children),
+                            )
+                          }
+                        >
+                          {optionProps.children}
+                        </SelectOption>
+                      );
+                    }
+                    return child;
+                  })}
+            </SelectDropdown>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/Select/index.tsx b/app/components/Select/index.tsx
new file mode 100644
index 0000000..881e661
--- /dev/null
+++ b/app/components/Select/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./Select.container";
+export type { SelectProps, SelectOptionData } from "./Select.types";
diff --git a/app/components/ContextMenuItem.tsx b/app/components/SelectOption/SelectOption.container.tsx
similarity index 50%
rename from app/components/ContextMenuItem.tsx
rename to app/components/SelectOption/SelectOption.container.tsx
index 37c2aeb..c3143b0 100644
--- a/app/components/ContextMenuItem.tsx
+++ b/app/components/SelectOption/SelectOption.container.tsx
@@ -1,25 +1,14 @@
 "use client";
 
 import { forwardRef, memo, useCallback } from "react";
+import { SelectOptionView } from "./SelectOption.view";
+import type { SelectOptionProps } from "./SelectOption.types";
 
-interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
-  selected?: boolean;
-  hasSubmenu?: boolean;
-  disabled?: boolean;
-  className?: string;
-  onClick?: (
-    _e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
-  ) => void;
-  size?: "small" | "medium" | "large";
-}
-
-const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
+const SelectOptionContainer = forwardRef<HTMLDivElement, SelectOptionProps>(
   (
     {
       children,
       selected = false,
-      hasSubmenu = false,
       disabled = false,
       className = "",
       onClick,
@@ -85,55 +74,22 @@ const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
     );
 
     return (
-      <div
+      <SelectOptionView
         ref={ref}
-        className={itemClasses}
-        role="menuitem"
-        tabIndex={disabled ? -1 : 0}
-        aria-current={selected ? "true" : undefined}
-        aria-disabled={disabled}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
+        selected={selected}
+        disabled={disabled}
+        className={className}
+        itemClasses={itemClasses}
+        handleClick={handleClick}
+        handleKeyDown={handleKeyDown}
         {...props}
       >
-        <div className="flex items-center gap-[8px]">
-          {selected && (
-            <svg
-              className="w-4 h-4 text-[var(--color-content-default-brand-primary)]"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          )}
-          <span>{children}</span>
-        </div>
-        {hasSubmenu && (
-          <svg
-            className="w-4 h-4 text-[var(--color-content-default-brand-primary)]"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M9 5l7 7-7 7"
-            />
-          </svg>
-        )}
-      </div>
+        {children}
+      </SelectOptionView>
     );
   },
 );
 
-ContextMenuItem.displayName = "ContextMenuItem";
+SelectOptionContainer.displayName = "SelectOption";
 
-export default memo(ContextMenuItem);
+export default memo(SelectOptionContainer);
diff --git a/app/components/SelectOption/SelectOption.types.ts b/app/components/SelectOption/SelectOption.types.ts
new file mode 100644
index 0000000..4fca4b9
--- /dev/null
+++ b/app/components/SelectOption/SelectOption.types.ts
@@ -0,0 +1,20 @@
+export interface SelectOptionProps {
+  children?: React.ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
+  className?: string;
+  onClick?: (
+    _e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
+  ) => void;
+  size?: "small" | "medium" | "large";
+}
+
+export interface SelectOptionViewProps {
+  children?: React.ReactNode;
+  selected: boolean;
+  disabled: boolean;
+  className: string;
+  itemClasses: string;
+  handleClick: (_e: React.MouseEvent<HTMLDivElement>) => void;
+  handleKeyDown: (_e: React.KeyboardEvent<HTMLDivElement>) => void;
+}
diff --git a/app/components/SelectOption/SelectOption.view.tsx b/app/components/SelectOption/SelectOption.view.tsx
new file mode 100644
index 0000000..04c1a4a
--- /dev/null
+++ b/app/components/SelectOption/SelectOption.view.tsx
@@ -0,0 +1,55 @@
+import { forwardRef } from "react";
+import type { SelectOptionViewProps } from "./SelectOption.types";
+
+export const SelectOptionView = forwardRef<
+  HTMLDivElement,
+  SelectOptionViewProps
+>(
+  (
+    {
+      children,
+      selected,
+      disabled,
+      itemClasses,
+      handleClick,
+      handleKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={itemClasses}
+        role="option"
+        tabIndex={disabled ? -1 : 0}
+        aria-selected={selected}
+        aria-disabled={disabled}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        {...props}
+      >
+        <div className="flex items-center gap-[8px]">
+          {selected && (
+            <svg
+              className="w-4 h-4 text-[var(--color-content-default-brand-primary)]"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 13l4 4L19 7"
+              />
+            </svg>
+          )}
+          <span>{children}</span>
+        </div>
+      </div>
+    );
+  },
+);
+
+SelectOptionView.displayName = "SelectOptionView";
diff --git a/app/components/SelectOption/index.tsx b/app/components/SelectOption/index.tsx
new file mode 100644
index 0000000..7dbf668
--- /dev/null
+++ b/app/components/SelectOption/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./SelectOption.container";
+export type { SelectOptionProps } from "./SelectOption.types";
diff --git a/app/components/Switch.tsx b/app/components/Switch/Switch.container.tsx
similarity index 72%
rename from app/components/Switch.tsx
rename to app/components/Switch/Switch.container.tsx
index 331013d..b4d374d 100644
--- a/app/components/Switch.tsx
+++ b/app/components/Switch/Switch.container.tsx
@@ -1,23 +1,10 @@
+"use client";
+
 import { memo, useCallback, useId, forwardRef } from "react";
+import { SwitchView } from "./Switch.view";
+import type { SwitchProps } from "./Switch.types";
 
-interface SwitchProps extends Omit<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  "onChange"
-> {
-  checked?: boolean;
-  onChange?: (
-    _e:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>,
-  ) => void;
-  onFocus?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
-  onBlur?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
-  state?: "default" | "hover" | "focus";
-  label?: string;
-  className?: string;
-}
-
-const Switch = memo(
+const SwitchContainer = memo(
   forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
     const {
       checked = false,
@@ -150,31 +137,27 @@ const Switch = memo(
       .replace(/\s+/g, " ");
 
     return (
-      <div className="flex items-center">
-        <button
-          ref={ref}
-          id={switchId}
-          type="button"
-          role="switch"
-          aria-checked={checked}
-          aria-label={label || "Toggle switch"}
-          onClick={handleClick}
-          onKeyDown={handleKeyDown}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          className={switchClasses}
-          {...rest}
-        >
-          <div className={trackClasses}>
-            <div className={thumbClasses} />
-          </div>
-        </button>
-        {label && <span className={labelClasses}>{label}</span>}
-      </div>
+      <SwitchView
+        ref={ref}
+        switchId={switchId}
+        checked={checked}
+        state={state}
+        label={label}
+        className={className}
+        switchClasses={switchClasses}
+        trackClasses={trackClasses}
+        thumbClasses={thumbClasses}
+        labelClasses={labelClasses}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        {...rest}
+      />
     );
   }),
 );
 
-Switch.displayName = "Switch";
+SwitchContainer.displayName = "Switch";
 
-export default Switch;
+export default SwitchContainer;
diff --git a/app/components/Switch/Switch.types.ts b/app/components/Switch/Switch.types.ts
new file mode 100644
index 0000000..abaa740
--- /dev/null
+++ b/app/components/Switch/Switch.types.ts
@@ -0,0 +1,32 @@
+export interface SwitchProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> {
+  checked?: boolean;
+  onChange?: (
+    _e:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
+  ) => void;
+  onFocus?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+  onBlur?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+  state?: "default" | "hover" | "focus";
+  label?: string;
+  className?: string;
+}
+
+export interface SwitchViewProps {
+  switchId: string;
+  checked: boolean;
+  state: "default" | "hover" | "focus";
+  label?: string;
+  className: string;
+  switchClasses: string;
+  trackClasses: string;
+  thumbClasses: string;
+  labelClasses: string;
+  onClick: (_e: React.MouseEvent<HTMLButtonElement>) => void;
+  onKeyDown: (_e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onFocus: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+  onBlur: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+}
diff --git a/app/components/Switch/Switch.view.tsx b/app/components/Switch/Switch.view.tsx
new file mode 100644
index 0000000..2d8b36e
--- /dev/null
+++ b/app/components/Switch/Switch.view.tsx
@@ -0,0 +1,48 @@
+import { forwardRef } from "react";
+import type { SwitchViewProps } from "./Switch.types";
+
+export const SwitchView = forwardRef<HTMLButtonElement, SwitchViewProps>(
+  (
+    {
+      switchId,
+      checked,
+      label,
+      switchClasses,
+      trackClasses,
+      thumbClasses,
+      labelClasses,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      ...rest
+    },
+    ref,
+  ) => {
+    return (
+      <div className="flex items-center">
+        <button
+          ref={ref}
+          id={switchId}
+          type="button"
+          role="switch"
+          aria-checked={checked}
+          aria-label={label || "Toggle switch"}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          className={switchClasses}
+          {...rest}
+        >
+          <div className={trackClasses}>
+            <div className={thumbClasses} />
+          </div>
+        </button>
+        {label && <span className={labelClasses}>{label}</span>}
+      </div>
+    );
+  },
+);
+
+SwitchView.displayName = "SwitchView";
diff --git a/app/components/Switch/index.tsx b/app/components/Switch/index.tsx
new file mode 100644
index 0000000..90f7653
--- /dev/null
+++ b/app/components/Switch/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./Switch.container";
+export type { SwitchProps } from "./Switch.types";
diff --git a/app/components/TextArea.tsx b/app/components/TextArea/TextArea.container.tsx
similarity index 73%
rename from app/components/TextArea.tsx
rename to app/components/TextArea/TextArea.container.tsx
index 6511658..ae875ee 100644
--- a/app/components/TextArea.tsx
+++ b/app/components/TextArea/TextArea.container.tsx
@@ -1,28 +1,11 @@
 "use client";
 
 import { memo, forwardRef } from "react";
-import { useComponentId, useFormField } from "../hooks";
+import { useComponentId, useFormField } from "../../hooks";
+import { TextAreaView } from "./TextArea.view";
+import type { TextAreaProps } from "./TextArea.types";
 
-interface TextAreaProps extends Omit<
-  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-  "size" | "onChange" | "onFocus" | "onBlur"
-> {
-  size?: "small" | "medium" | "large";
-  labelVariant?: "default" | "horizontal";
-  state?: "default" | "active" | "hover" | "focus";
-  disabled?: boolean;
-  error?: boolean;
-  label?: string;
-  placeholder?: string;
-  value?: string;
-  onChange?: (_e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  onFocus?: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
-  onBlur?: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
-  className?: string;
-  rows?: number;
-}
-
-const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   (
     {
       size = "medium",
@@ -163,40 +146,35 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       });
 
     return (
-      <div className={containerClasses}>
-        {label && (
-          <label
-            id={labelId}
-            htmlFor={textareaId}
-            className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-secondary)]`}
-          >
-            {label}
-          </label>
-        )}
-        <div className={disabled ? "opacity-40" : ""}>
-          <textarea
-            ref={ref}
-            id={textareaId}
-            name={name}
-            value={value}
-            placeholder={placeholder}
-            onChange={handleChange}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            disabled={disabled}
-            rows={rows}
-            className={textareaClasses}
-            style={{ borderRadius: currentSize.radius }}
-            aria-disabled={disabled}
-            aria-invalid={error}
-            {...props}
-          />
-        </div>
-      </div>
+      <TextAreaView
+        ref={ref}
+        textareaId={textareaId}
+        labelId={labelId}
+        size={size}
+        labelVariant={labelVariant}
+        state={state}
+        disabled={disabled}
+        error={error}
+        label={label}
+        placeholder={placeholder}
+        value={value}
+        name={name}
+        className={className}
+        rows={rows}
+        containerClasses={containerClasses}
+        labelClasses={labelClasses}
+        textareaClasses={textareaClasses}
+        borderRadius={currentSize.radius}
+        handleChange={handleChange}
+        handleFocus={handleFocus}
+        handleBlur={handleBlur}
+        aria-invalid={error}
+        {...props}
+      />
     );
   },
 );
 
-TextArea.displayName = "TextArea";
+TextAreaContainer.displayName = "TextArea";
 
-export default memo(TextArea);
+export default memo(TextAreaContainer);
diff --git a/app/components/TextArea/TextArea.types.ts b/app/components/TextArea/TextArea.types.ts
new file mode 100644
index 0000000..0482fea
--- /dev/null
+++ b/app/components/TextArea/TextArea.types.ts
@@ -0,0 +1,41 @@
+export interface TextAreaProps extends Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "size" | "onChange" | "onFocus" | "onBlur"
+> {
+  size?: "small" | "medium" | "large";
+  labelVariant?: "default" | "horizontal";
+  state?: "default" | "active" | "hover" | "focus";
+  disabled?: boolean;
+  error?: boolean;
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (_e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onFocus?: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onBlur?: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
+  className?: string;
+  rows?: number;
+}
+
+export interface TextAreaViewProps {
+  textareaId: string;
+  labelId: string;
+  size: "small" | "medium" | "large";
+  labelVariant: "default" | "horizontal";
+  state: "default" | "active" | "hover" | "focus";
+  disabled: boolean;
+  error: boolean;
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  name?: string;
+  className: string;
+  rows?: number;
+  containerClasses: string;
+  labelClasses: string;
+  textareaClasses: string;
+  borderRadius: string;
+  handleChange: (_e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleFocus: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
+  handleBlur: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
+}
diff --git a/app/components/TextArea/TextArea.view.tsx b/app/components/TextArea/TextArea.view.tsx
new file mode 100644
index 0000000..523a06e
--- /dev/null
+++ b/app/components/TextArea/TextArea.view.tsx
@@ -0,0 +1,62 @@
+import { forwardRef } from "react";
+import type { TextAreaViewProps } from "./TextArea.types";
+
+export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
+  (
+    {
+      textareaId,
+      labelId,
+      label,
+      placeholder,
+      value,
+      name,
+      disabled,
+      className: _className,
+      rows,
+      containerClasses,
+      labelClasses,
+      textareaClasses,
+      borderRadius,
+      handleChange,
+      handleFocus,
+      handleBlur,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div className={containerClasses}>
+        {label && (
+          <label
+            id={labelId}
+            htmlFor={textareaId}
+            className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-secondary)]`}
+          >
+            {label}
+          </label>
+        )}
+        <div className={disabled ? "opacity-40" : ""}>
+          <textarea
+            ref={ref}
+            id={textareaId}
+            name={name}
+            value={value}
+            placeholder={placeholder}
+            onChange={handleChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            disabled={disabled}
+            rows={rows}
+            className={textareaClasses}
+            style={{ borderRadius }}
+            aria-disabled={disabled}
+            aria-invalid={props["aria-invalid"]}
+            {...props}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+TextAreaView.displayName = "TextAreaView";
diff --git a/app/components/TextArea/index.tsx b/app/components/TextArea/index.tsx
new file mode 100644
index 0000000..c55a926
--- /dev/null
+++ b/app/components/TextArea/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./TextArea.container";
+export type { TextAreaProps } from "./TextArea.types";
diff --git a/app/components/Toggle.tsx b/app/components/Toggle/Toggle.container.tsx
similarity index 73%
rename from app/components/Toggle.tsx
rename to app/components/Toggle/Toggle.container.tsx
index 86dcebb..c2dfe15 100644
--- a/app/components/Toggle.tsx
+++ b/app/components/Toggle/Toggle.container.tsx
@@ -1,28 +1,10 @@
+"use client";
+
 import { memo, useCallback, useId, forwardRef } from "react";
+import { ToggleView } from "./Toggle.view";
+import type { ToggleProps } from "./Toggle.types";
 
-interface ToggleProps extends Omit<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  "onChange"
-> {
-  label?: string;
-  checked?: boolean;
-  onChange?: (
-    _e:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>,
-  ) => void;
-  onFocus?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
-  onBlur?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
-  disabled?: boolean;
-  state?: "default" | "hover" | "focus";
-  showIcon?: boolean;
-  showText?: boolean;
-  icon?: string;
-  text?: string;
-  className?: string;
-}
-
-const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
+const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
   (
     {
       label,
@@ -183,41 +165,32 @@ const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
     );
 
     return (
-      <div className={containerClasses}>
-        {label && (
-          <label
-            id={labelId}
-            htmlFor={toggleId}
-            className={`${labelClasses} text-[var(--color-content-default-secondary)]`}
-          >
-            {label}
-          </label>
-        )}
-        <div className={disabled ? "opacity-40" : ""}>
-          <button
-            ref={ref}
-            id={toggleId}
-            type="button"
-            role="switch"
-            aria-checked={checked}
-            aria-labelledby={label ? labelId : undefined}
-            disabled={disabled}
-            onClick={handleChange}
-            onKeyDown={handleKeyDown}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            className={toggleClasses}
-            {...props}
-          >
-            {showIcon && <span className="italic">{icon}</span>}
-            {showText && <span>{text}</span>}
-          </button>
-        </div>
-      </div>
+      <ToggleView
+        ref={ref}
+        toggleId={toggleId}
+        labelId={labelId}
+        checked={checked}
+        disabled={disabled}
+        state={state}
+        label={label}
+        showIcon={showIcon}
+        showText={showText}
+        icon={icon}
+        text={text}
+        className={className}
+        containerClasses={containerClasses}
+        labelClasses={labelClasses}
+        toggleClasses={toggleClasses}
+        onClick={handleChange}
+        onKeyDown={handleKeyDown}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        {...props}
+      />
     );
   },
 );
 
-Toggle.displayName = "Toggle";
+ToggleContainer.displayName = "Toggle";
 
-export default memo(Toggle);
+export default memo(ToggleContainer);
diff --git a/app/components/Toggle/Toggle.types.ts b/app/components/Toggle/Toggle.types.ts
new file mode 100644
index 0000000..efd36ff
--- /dev/null
+++ b/app/components/Toggle/Toggle.types.ts
@@ -0,0 +1,46 @@
+export interface ToggleProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> {
+  label?: string;
+  checked?: boolean;
+  onChange?: (
+    _e:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
+  ) => void;
+  onFocus?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+  onBlur?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+  state?: "default" | "hover" | "focus";
+  showIcon?: boolean;
+  showText?: boolean;
+  icon?: string;
+  text?: string;
+  className?: string;
+}
+
+export interface ToggleViewProps {
+  toggleId: string;
+  labelId: string;
+  checked: boolean;
+  disabled: boolean;
+  state: "default" | "hover" | "focus";
+  label?: string;
+  showIcon: boolean;
+  showText: boolean;
+  icon: string;
+  text: string;
+  className: string;
+  containerClasses: string;
+  labelClasses: string;
+  toggleClasses: string;
+  onClick: (
+    _e:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
+  ) => void;
+  onKeyDown: (_e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onFocus: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+  onBlur: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+}
diff --git a/app/components/Toggle/Toggle.view.tsx b/app/components/Toggle/Toggle.view.tsx
new file mode 100644
index 0000000..0b335a6
--- /dev/null
+++ b/app/components/Toggle/Toggle.view.tsx
@@ -0,0 +1,63 @@
+import { forwardRef } from "react";
+import type { ToggleViewProps } from "./Toggle.types";
+
+export const ToggleView = forwardRef<HTMLButtonElement, ToggleViewProps>(
+  (
+    {
+      toggleId,
+      labelId,
+      checked,
+      disabled,
+      label,
+      showIcon,
+      showText,
+      icon,
+      text,
+      containerClasses,
+      labelClasses,
+      toggleClasses,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      ...rest
+    },
+    ref,
+  ) => {
+    return (
+      <div className={containerClasses}>
+        {label && (
+          <label
+            id={labelId}
+            htmlFor={toggleId}
+            className={`${labelClasses} text-[var(--color-content-default-secondary)]`}
+          >
+            {label}
+          </label>
+        )}
+        <div className={disabled ? "opacity-40" : ""}>
+          <button
+            ref={ref}
+            id={toggleId}
+            type="button"
+            role="switch"
+            aria-checked={checked}
+            aria-labelledby={label ? labelId : undefined}
+            disabled={disabled}
+            onClick={onClick}
+            onKeyDown={onKeyDown}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            className={toggleClasses}
+            {...rest}
+          >
+            {showIcon && <span className="italic">{icon}</span>}
+            {showText && <span>{text}</span>}
+          </button>
+        </div>
+      </div>
+    );
+  },
+);
+
+ToggleView.displayName = "ToggleView";
diff --git a/app/components/Toggle/index.tsx b/app/components/Toggle/index.tsx
new file mode 100644
index 0000000..d609fda
--- /dev/null
+++ b/app/components/Toggle/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./Toggle.container";
+export type { ToggleProps } from "./Toggle.types";
diff --git a/app/components/ToggleGroup.tsx b/app/components/ToggleGroup/ToggleGroup.container.tsx
similarity index 76%
rename from app/components/ToggleGroup.tsx
rename to app/components/ToggleGroup/ToggleGroup.container.tsx
index fde5e9d..37b9182 100644
--- a/app/components/ToggleGroup.tsx
+++ b/app/components/ToggleGroup/ToggleGroup.container.tsx
@@ -1,26 +1,11 @@
+"use client";
+
 import { memo, useCallback, useId, forwardRef } from "react";
+import { ToggleGroupView } from "./ToggleGroup.view";
+import type { ToggleGroupProps } from "./ToggleGroup.types";
 
-interface ToggleGroupProps extends Omit<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  "onChange"
-> {
-  children?: React.ReactNode;
-  className?: string;
-  position?: "left" | "middle" | "right";
-  state?: "default" | "hover" | "focus" | "selected";
-  showText?: boolean;
-  ariaLabel?: string;
-  onChange?: (
-    _e:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>,
-  ) => void;
-  onFocus?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
-  onBlur?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
-}
-
-const ToggleGroup = memo(
-  forwardRef<HTMLButtonElement, ToggleGroupProps>((props, ref) => {
+const ToggleGroupContainer = memo(
+  forwardRef<HTMLButtonElement, ToggleGroupProps>((props, _ref) => {
     const {
       children,
       className = "",
@@ -132,25 +117,26 @@ const ToggleGroup = memo(
       .replace(/\s+/g, " ");
 
     return (
-      <button
-        ref={ref}
-        id={groupId}
-        type="button"
-        role="button"
-        aria-label={ariaLabel || (showText ? undefined : "Toggle option")}
+      <ToggleGroupView
+        groupId={groupId}
+        className={className}
+        position={position}
+        state={state}
+        showText={showText}
+        ariaLabel={ariaLabel}
+        toggleClasses={toggleClasses}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         onFocus={handleFocus}
         onBlur={handleBlur}
-        className={toggleClasses}
         {...rest}
       >
-        {showText ? children : children || "☰"}
-      </button>
+        {children}
+      </ToggleGroupView>
     );
   }),
 );
 
-ToggleGroup.displayName = "ToggleGroup";
+ToggleGroupContainer.displayName = "ToggleGroup";
 
-export default ToggleGroup;
+export default ToggleGroupContainer;
diff --git a/app/components/ToggleGroup/ToggleGroup.types.ts b/app/components/ToggleGroup/ToggleGroup.types.ts
new file mode 100644
index 0000000..30fc2be
--- /dev/null
+++ b/app/components/ToggleGroup/ToggleGroup.types.ts
@@ -0,0 +1,33 @@
+export interface ToggleGroupProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> {
+  children?: React.ReactNode;
+  className?: string;
+  position?: "left" | "middle" | "right";
+  state?: "default" | "hover" | "focus" | "selected";
+  showText?: boolean;
+  ariaLabel?: string;
+  onChange?: (
+    _e:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
+  ) => void;
+  onFocus?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+  onBlur?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+}
+
+export interface ToggleGroupViewProps {
+  groupId: string;
+  children?: React.ReactNode;
+  className: string;
+  position: "left" | "middle" | "right";
+  state: "default" | "hover" | "focus" | "selected";
+  showText: boolean;
+  ariaLabel?: string;
+  toggleClasses: string;
+  onClick: (_e: React.MouseEvent<HTMLButtonElement>) => void;
+  onKeyDown: (_e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onFocus: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+  onBlur: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+}
diff --git a/app/components/ToggleGroup/ToggleGroup.view.tsx b/app/components/ToggleGroup/ToggleGroup.view.tsx
new file mode 100644
index 0000000..5daabec
--- /dev/null
+++ b/app/components/ToggleGroup/ToggleGroup.view.tsx
@@ -0,0 +1,34 @@
+import type { ToggleGroupViewProps } from "./ToggleGroup.types";
+
+export function ToggleGroupView({
+  groupId,
+  children,
+  className: _className,
+  position: _position,
+  state: _state,
+  showText,
+  ariaLabel,
+  toggleClasses,
+  onClick,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  ...rest
+}: ToggleGroupViewProps) {
+  return (
+    <button
+      id={groupId}
+      type="button"
+      role="button"
+      aria-label={ariaLabel || (showText ? undefined : "Toggle option")}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      className={toggleClasses}
+      {...rest}
+    >
+      {showText ? children : children || "☰"}
+    </button>
+  );
+}
diff --git a/app/components/ToggleGroup/index.tsx b/app/components/ToggleGroup/index.tsx
new file mode 100644
index 0000000..e1e13d8
--- /dev/null
+++ b/app/components/ToggleGroup/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./ToggleGroup.container";
+export type { ToggleGroupProps } from "./ToggleGroup.types";
diff --git a/app/components/WebVitalsDashboard/WebVitalsDashboard.container.tsx b/app/components/WebVitalsDashboard/WebVitalsDashboard.container.tsx
new file mode 100644
index 0000000..0b9ea0c
--- /dev/null
+++ b/app/components/WebVitalsDashboard/WebVitalsDashboard.container.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { memo, useEffect, useState } from "react";
+import { logger } from "../../../lib/logger";
+import WebVitalsDashboardView from "./WebVitalsDashboard.view";
+import type { Metrics, Vitals, VitalData } from "./WebVitalsDashboard.types";
+
+const createInitialVital = (): VitalData => ({
+  value: 0,
+  rating: "unknown",
+});
+
+const createInitialVitals = (): Vitals => ({
+  lcp: createInitialVital(),
+  fid: createInitialVital(),
+  cls: createInitialVital(),
+  fcp: createInitialVital(),
+  ttfb: createInitialVital(),
+});
+
+const WebVitalsDashboardContainer = memo(() => {
+  const [vitals, setVitals] = useState<Vitals>(createInitialVitals);
+  const [metrics, setMetrics] = useState<Metrics>({});
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchVitals = async () => {
+      try {
+        const response = await fetch("/api/web-vitals");
+        const data = (await response.json()) as { metrics?: Metrics };
+        setMetrics(data.metrics || {});
+      } catch (error) {
+        logger.error("Error fetching web vitals:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchVitals();
+
+    if (typeof window !== "undefined") {
+      import("web-vitals").then((webVitals) => {
+        const { getCLS, getFID, getFCP, getLCP, getTTFB } = webVitals as any;
+
+        getLCP((metric: { value: number; rating: VitalData["rating"] }) => {
+          setVitals((prev) => ({
+            ...prev,
+            lcp: {
+              value: Math.round(metric.value),
+              rating: metric.rating,
+            },
+          }));
+        });
+
+        getFID((metric: { value: number; rating: VitalData["rating"] }) => {
+          setVitals((prev) => ({
+            ...prev,
+            fid: {
+              value: Math.round(metric.value),
+              rating: metric.rating,
+            },
+          }));
+        });
+
+        getCLS((metric: { value: number; rating: VitalData["rating"] }) => {
+          setVitals((prev) => ({
+            ...prev,
+            cls: {
+              value: Math.round(metric.value * 1000) / 1000,
+              rating: metric.rating,
+            },
+          }));
+        });
+
+        getFCP((metric: { value: number; rating: VitalData["rating"] }) => {
+          setVitals((prev) => ({
+            ...prev,
+            fcp: {
+              value: Math.round(metric.value),
+              rating: metric.rating,
+            },
+          }));
+        });
+
+        getTTFB((metric: { value: number; rating: VitalData["rating"] }) => {
+          setVitals((prev) => ({
+            ...prev,
+            ttfb: {
+              value: Math.round(metric.value),
+              rating: metric.rating,
+            },
+          }));
+        });
+      });
+    }
+  }, []);
+
+  return (
+    <WebVitalsDashboardView
+      vitals={vitals}
+      metrics={metrics}
+      loading={loading}
+    />
+  );
+});
+
+WebVitalsDashboardContainer.displayName = "WebVitalsDashboard";
+
+export default WebVitalsDashboardContainer;
diff --git a/app/components/WebVitalsDashboard/WebVitalsDashboard.types.ts b/app/components/WebVitalsDashboard/WebVitalsDashboard.types.ts
new file mode 100644
index 0000000..945bb7f
--- /dev/null
+++ b/app/components/WebVitalsDashboard/WebVitalsDashboard.types.ts
@@ -0,0 +1,33 @@
+export interface VitalData {
+  value: number;
+  rating: "good" | "needs-improvement" | "poor" | "unknown";
+}
+
+export interface Vitals {
+  lcp: VitalData;
+  fid: VitalData;
+  cls: VitalData;
+  fcp: VitalData;
+  ttfb: VitalData;
+}
+
+export interface MetricData {
+  count: number;
+  average: number;
+  min: number;
+  max: number;
+  goodCount: number;
+  needsImprovementCount: number;
+  poorCount: number;
+  lastUpdated?: string;
+}
+
+export interface Metrics {
+  [key: string]: MetricData;
+}
+
+export interface WebVitalsDashboardViewProps {
+  vitals: Vitals;
+  metrics: Metrics;
+  loading: boolean;
+}
diff --git a/app/components/WebVitalsDashboard.tsx b/app/components/WebVitalsDashboard/WebVitalsDashboard.view.tsx
similarity index 52%
rename from app/components/WebVitalsDashboard.tsx
rename to app/components/WebVitalsDashboard/WebVitalsDashboard.view.tsx
index fa556a8..ec1d073 100644
--- a/app/components/WebVitalsDashboard.tsx
+++ b/app/components/WebVitalsDashboard/WebVitalsDashboard.view.tsx
@@ -1,159 +1,43 @@
-"use client";
+import type { WebVitalsDashboardViewProps } from "./WebVitalsDashboard.types";
 
-import { useState, useEffect, memo } from "react";
-import { logger } from "../../lib/logger";
+const getRatingColor = (rating: string): string => {
+  switch (rating) {
+    case "good":
+      return "text-green-600 bg-green-50";
+    case "needs-improvement":
+      return "text-yellow-600 bg-yellow-50";
+    case "poor":
+      return "text-red-600 bg-red-50";
+    default:
+      return "text-gray-600 bg-gray-50";
+  }
+};
 
-interface VitalData {
-  value: number;
-  rating: "good" | "needs-improvement" | "poor" | "unknown";
-}
+const getRatingIcon = (rating: string): string => {
+  switch (rating) {
+    case "good":
+      return "✅";
+    case "needs-improvement":
+      return "⚠️";
+    case "poor":
+      return "❌";
+    default:
+      return "❓";
+  }
+};
 
-interface Vitals {
-  lcp: VitalData;
-  fid: VitalData;
-  cls: VitalData;
-  fcp: VitalData;
-  ttfb: VitalData;
-}
-
-interface MetricData {
-  count: number;
-  average: number;
-  min: number;
-  max: number;
-  goodCount: number;
-  needsImprovementCount: number;
-  poorCount: number;
-  lastUpdated?: string;
-}
-
-interface Metrics {
-  [key: string]: MetricData;
-}
-
-const WebVitalsDashboard = memo(() => {
-  const [vitals, setVitals] = useState<Vitals>({
-    lcp: { value: 0, rating: "unknown" },
-    fid: { value: 0, rating: "unknown" },
-    cls: { value: 0, rating: "unknown" },
-    fcp: { value: 0, rating: "unknown" },
-    ttfb: { value: 0, rating: "unknown" },
-  });
-
-  const [metrics, setMetrics] = useState<Metrics>({});
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    // Fetch Web Vitals data from API
-    const fetchVitals = async () => {
-      try {
-        const response = await fetch("/api/web-vitals");
-        const data = (await response.json()) as { metrics?: Metrics };
-        setMetrics(data.metrics || {});
-      } catch (error) {
-        logger.error("Error fetching web vitals:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchVitals();
-
-    // Set up Web Vitals tracking
-    if (typeof window !== "undefined") {
-      import("web-vitals").then((webVitals) => {
-        const { getCLS, getFID, getFCP, getLCP, getTTFB } = webVitals as any;
-        // Track Largest Contentful Paint
-        getLCP((metric) => {
-          setVitals((prev) => ({
-            ...prev,
-            lcp: {
-              value: Math.round(metric.value),
-              rating: metric.rating,
-            },
-          }));
-        });
-
-        // Track First Input Delay
-        getFID((metric) => {
-          setVitals((prev) => ({
-            ...prev,
-            fid: {
-              value: Math.round(metric.value),
-              rating: metric.rating,
-            },
-          }));
-        });
-
-        // Track Cumulative Layout Shift
-        getCLS((metric) => {
-          setVitals((prev) => ({
-            ...prev,
-            cls: {
-              value: Math.round(metric.value * 1000) / 1000,
-              rating: metric.rating,
-            },
-          }));
-        });
-
-        // Track First Contentful Paint
-        getFCP((metric) => {
-          setVitals((prev) => ({
-            ...prev,
-            fcp: {
-              value: Math.round(metric.value),
-              rating: metric.rating,
-            },
-          }));
-        });
-
-        // Track Time to First Byte
-        getTTFB((metric) => {
-          setVitals((prev) => ({
-            ...prev,
-            ttfb: {
-              value: Math.round(metric.value),
-              rating: metric.rating,
-            },
-          }));
-        });
-      });
-    }
-  }, []);
-
-  const getRatingColor = (rating: string): string => {
-    switch (rating) {
-      case "good":
-        return "text-green-600 bg-green-50";
-      case "needs-improvement":
-        return "text-yellow-600 bg-yellow-50";
-      case "poor":
-        return "text-red-600 bg-red-50";
-      default:
-        return "text-gray-600 bg-gray-50";
-    }
-  };
-
-  const getRatingIcon = (rating: string): string => {
-    switch (rating) {
-      case "good":
-        return "✅";
-      case "needs-improvement":
-        return "⚠️";
-      case "poor":
-        return "❌";
-      default:
-        return "❓";
-    }
-  };
-
-  const formatValue = (metric: string, value: number): string => {
-    if (metric === "cls") {
-      return value.toFixed(3);
-    }
-    return `${value}ms`;
-  };
+const formatValue = (metric: string, value: number): string => {
+  if (metric === "cls") {
+    return value.toFixed(3);
+  }
+  return `${value}ms`;
+};
 
+function WebVitalsDashboardView({
+  vitals,
+  metrics,
+  loading,
+}: WebVitalsDashboardViewProps) {
   if (loading) {
     return (
       <div className="p-6 bg-white rounded-lg shadow-lg">
@@ -266,8 +150,6 @@ const WebVitalsDashboard = memo(() => {
       </div>
     </div>
   );
-});
+}
 
-WebVitalsDashboard.displayName = "WebVitalsDashboard";
-
-export default WebVitalsDashboard;
+export default WebVitalsDashboardView;
diff --git a/app/components/WebVitalsDashboard/index.tsx b/app/components/WebVitalsDashboard/index.tsx
new file mode 100644
index 0000000..9c9d1b2
--- /dev/null
+++ b/app/components/WebVitalsDashboard/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./WebVitalsDashboard.container";
+export * from "./WebVitalsDashboard.types";
diff --git a/app/hooks/useMediaQuery.ts b/app/hooks/useMediaQuery.ts
index a04e921..8f6c134 100644
--- a/app/hooks/useMediaQuery.ts
+++ b/app/hooks/useMediaQuery.ts
@@ -33,27 +33,30 @@ export function useMediaQuery(
   query: string | keyof typeof BREAKPOINTS,
   direction: "min" | "max" = "min",
 ): boolean {
-  const [matches, setMatches] = useState(false);
+  // Convert breakpoint key to media query string
+  let mediaQuery: string;
+  if (query in BREAKPOINTS) {
+    const breakpoint = BREAKPOINTS[query as keyof typeof BREAKPOINTS];
+    mediaQuery = `(${direction}-width: ${breakpoint}px)`;
+  } else {
+    mediaQuery = query;
+  }
+
+  // Initialize state with current match if available (SSR safety)
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+    return window.matchMedia(mediaQuery).matches;
+  });
 
   useEffect(() => {
-    // Convert breakpoint key to media query string
-    let mediaQuery: string;
-    if (query in BREAKPOINTS) {
-      const breakpoint = BREAKPOINTS[query as keyof typeof BREAKPOINTS];
-      mediaQuery = `(${direction}-width: ${breakpoint}px)`;
-    } else {
-      mediaQuery = query;
-    }
-
     // Check if window is available (SSR safety)
     if (typeof window === "undefined") {
       return;
     }
 
     const media = window.matchMedia(mediaQuery);
-    // Initialize matches synchronously - this is safe for media queries
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    setMatches(media.matches);
 
     // Create listener for changes
     const listener = (event: MediaQueryListEvent) => {
diff --git a/config/gitea-runner.plist b/config/gitea-runner.plist
deleted file mode 100644
index 533337c..0000000
--- a/config/gitea-runner.plist
+++ /dev/null
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-    <key>Label</key>
-    <string>com.gitea.act-runner</string>
-    <key>ProgramArguments</key>
-    <array>
-        <string>/Users/Vinod/Documents/GitHub/community-rule/act_runner</string>
-        <string>daemon</string>
-        <string>--config</string>
-        <string>/Users/Vinod/Documents/GitHub/community-rule/config/gitea-runner.yaml</string>
-    </array>
-    <key>WorkingDirectory</key>
-    <string>/Users/Vinod/Documents/GitHub/community-rule</string>
-    <key>RunAtLoad</key>
-    <true/>
-    <key>KeepAlive</key>
-    <true/>
-    <key>StandardOutPath</key>
-    <string>/Users/Vinod/Documents/GitHub/community-rule/runner.log</string>
-    <key>StandardErrorPath</key>
-    <string>/Users/Vinod/Documents/GitHub/community-rule/runner-error.log</string>
-</dict>
-</plist>
diff --git a/config/gitea-runner.yaml b/config/gitea-runner.yaml
deleted file mode 100644
index 96c2933..0000000
--- a/config/gitea-runner.yaml
+++ /dev/null
@@ -1,33 +0,0 @@
-log:
-  level: info
-
-runner:
-  file: .runner
-  capacity: 2
-  timeout: 3h
-  insecure: false
-  fetch_timeout: 5s
-  fetch_interval: 2s
-  labels:
-    - "self-hosted:host"
-    - "macos-latest:host"
-
-cache:
-  enabled: true
-  dir: ""
-  host: ""
-  port: 0
-  external_server: ""
-
-# container:
-#   network: ""
-#   privileged: false
-#   options:
-#   workdir_parent:
-#   valid_volumes: []
-#   docker_host: ""
-#   force_pull: false
-#   mode: "host"
-
-host:
-  workdir_parent: ""
diff --git a/config/runner-config.yaml b/config/runner-config.yaml
deleted file mode 100644
index 90d11af..0000000
--- a/config/runner-config.yaml
+++ /dev/null
@@ -1,10 +0,0 @@
-log:
-  level: info
-
-runner:
-  capacity: 2
-
-runners:
-  - name: community-rule-runner
-    labels:
-      - "ubuntu-latest:docker://mcr.microsoft.com/playwright:v1.54.2-jammy"
diff --git a/docs/CUSTOM_HOOKS.md b/docs/CUSTOM_HOOKS.md
index facb73f..3353673 100644
--- a/docs/CUSTOM_HOOKS.md
+++ b/docs/CUSTOM_HOOKS.md
@@ -347,14 +347,16 @@ const {
 
 The following components have been refactored to use custom hooks:
 
-- **Select.tsx** - Uses `useClickOutside`
-- **AskOrganizer.tsx** - Uses `useAnalytics`
+- **Select** - Uses `useClickOutside` (now uses Container/Presentation pattern)
+- **AskOrganizer** - Uses `useAnalytics` (now uses Container/Presentation pattern)
 - **Input.tsx** - Uses `useComponentId` and `useFormField`
 - **TextArea.tsx** - Uses `useComponentId` and `useFormField`
 - **Checkbox.tsx** - Uses `useComponentId`
-- **NumberedCards.tsx** - Uses `useSchemaData`
+- **NumberedCards** - Uses `useSchemaData` (now uses Container/Presentation pattern)
 - **RelatedArticles.tsx** - Uses `useIsMobile`
 
+> **Note**: Components marked with "Container/Presentation pattern" have been refactored to separate logic (container) from presentation (view). Hooks are used in the container components. See [Container/Presentation Pattern Guide](./guides/container-presentation-pattern.md) for details.
+
 ## Adding New Hooks
 
 When creating a new hook:
diff --git a/docs/README.md b/docs/README.md
index 07b50ca..56c9b29 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -11,6 +11,7 @@ This directory contains project documentation organized by topic.
 
 ### Guides (`guides/`)
 
+- **[container-presentation-pattern.md](./guides/container-presentation-pattern.md)** - Container/Presentation pattern guide for component architecture
 - **[content-creation.md](./guides/content-creation.md)** - Guide for creating blog content
 
 ## Quick Navigation
@@ -33,6 +34,15 @@ See **[CUSTOM_HOOKS.md](./CUSTOM_HOOKS.md)** for:
 - Usage examples
 - API documentation
 
+### For Component Architecture
+
+See **[container-presentation-pattern.md](./guides/container-presentation-pattern.md)** for:
+
+- Container/Presentation pattern overview
+- When and how to use the pattern
+- Migration guide for existing components
+- Best practices and examples
+
 ### For Content Creation
 
 See **[content-creation.md](./guides/content-creation.md)** for:
diff --git a/docs/guides/container-presentation-pattern.md b/docs/guides/container-presentation-pattern.md
new file mode 100644
index 0000000..d1bb041
--- /dev/null
+++ b/docs/guides/container-presentation-pattern.md
@@ -0,0 +1,401 @@
+# Container/Presentation Pattern
+
+## Overview
+
+The Container/Presentation pattern separates component logic from presentation, improving testability, reusability, and maintainability. This pattern is now the standard for complex components in this codebase.
+
+## Motivation
+
+### Benefits
+
+- **Testability**: Pure presentation components can be tested independently with simple prop assertions
+- **Reusability**: Presentation components can be reused with different data sources or logic
+- **Maintainability**: Clear separation makes it easier to locate and modify specific concerns
+- **Performance**: Easier to optimize rendering with React.memo on pure components
+
+### When to Use
+
+Use this pattern for components that have:
+
+- Business logic or state management
+- Data fetching or API calls
+- Analytics tracking
+- Complex event handlers
+- Custom hooks usage
+- Dynamic imports or side effects
+
+Simple presentational components (e.g., `Button`, `Avatar`) can remain as single files.
+
+## Folder Structure
+
+Each component following this pattern should have this structure:
+
+```
+app/components/[ComponentName]/
+  ├── index.tsx                    # Exports container as default
+  ├── [ComponentName].container.tsx # Logic, hooks, state management
+  ├── [ComponentName].view.tsx     # Pure presentation component
+  └── [ComponentName].types.ts     # Shared TypeScript types
+```
+
+### File Responsibilities
+
+#### `index.tsx`
+
+- Exports the container component as the default export
+- Optionally exports types for external use
+- Maintains backward compatibility with existing import paths
+
+```typescript
+export { default } from "./AskOrganizer.container";
+export type { AskOrganizerProps } from "./AskOrganizer.types";
+```
+
+#### `[ComponentName].container.tsx`
+
+**Contains all logic:**
+
+- React hooks (`useState`, `useEffect`, custom hooks)
+- Event handlers and business logic
+- Data fetching and API calls
+- Analytics tracking
+- State management
+- Computed values and derived state
+- Side effects
+
+**Should NOT contain:**
+
+- JSX layout details (beyond composing the view)
+- Inline styles or complex className logic (pass as props)
+- Direct DOM manipulation
+
+```typescript
+"use client";
+
+import { memo } from "react";
+import { useAnalytics } from "../../hooks";
+import { AskOrganizerView } from "./AskOrganizer.view";
+import type { AskOrganizerProps } from "./AskOrganizer.types";
+
+function AskOrganizerContainer(props: AskOrganizerProps) {
+  const { trackEvent } = useAnalytics();
+
+  const handleContactClick = () => {
+    trackEvent({
+      event: "contact_button_click",
+      category: "engagement",
+      component: "AskOrganizer",
+    });
+    // ... additional logic
+  };
+
+  // Compute derived props
+  const variantStyles = computeVariantStyles(props.variant);
+
+  return (
+    <AskOrganizerView
+      {...props}
+      onContactClick={handleContactClick}
+      variantStyles={variantStyles}
+    />
+  );
+}
+
+export default memo(AskOrganizerContainer);
+```
+
+#### `[ComponentName].view.tsx`
+
+**Pure presentation:**
+
+- Receives all data via props
+- Renders JSX based on props
+- No hooks, no state, no side effects
+- Only imports other presentational components
+
+**Should NOT contain:**
+
+- `useState`, `useEffect`, or any hooks
+- Event handler implementations (receive as callbacks)
+- Data fetching or API calls
+- Analytics tracking
+- Business logic
+
+```typescript
+import ContentLockup from "../ContentLockup";
+import Button from "../Button";
+import type { AskOrganizerViewProps } from "./AskOrganizer.types";
+
+export function AskOrganizerView({
+  title,
+  subtitle,
+  description,
+  buttonText,
+  buttonHref,
+  variant,
+  onContactClick,
+  variantStyles,
+  ...props
+}: AskOrganizerViewProps) {
+  return (
+    <section className={variantStyles.container}>
+      <ContentLockup
+        title={title}
+        subtitle={subtitle}
+        description={description}
+      />
+      <Button
+        href={buttonHref}
+        onClick={onContactClick}
+      >
+        {buttonText}
+      </Button>
+    </section>
+  );
+}
+```
+
+#### `[ComponentName].types.ts`
+
+- Shared TypeScript interfaces and types
+- Public props interface (used by consumers)
+- Internal view props (used between container and view)
+- Any utility types specific to the component
+
+```typescript
+export interface AskOrganizerProps {
+  title?: string;
+  subtitle?: string;
+  buttonText?: string;
+  buttonHref?: string;
+  variant?: "centered" | "left-aligned" | "compact" | "inverse";
+  onContactClick?: (data: ContactClickData) => void;
+}
+
+export interface AskOrganizerViewProps extends AskOrganizerProps {
+  onContactClick: () => void;
+  variantStyles: {
+    container: string;
+    buttonContainer: string;
+  };
+}
+```
+
+## Rules of Thumb
+
+### Container Components
+
+✅ **DO:**
+
+- Use React hooks (`useState`, `useEffect`, custom hooks)
+- Handle all event handlers and business logic
+- Fetch data and manage loading states
+- Track analytics events
+- Compute derived values from props/state
+- Compose the view component with computed props
+
+❌ **DON'T:**
+
+- Include complex JSX layout (delegate to view)
+- Mix presentation logic with business logic
+- Access DOM directly (use refs when necessary)
+
+### View Components
+
+✅ **DO:**
+
+- Receive all data via props
+- Render JSX based on props
+- Import only presentational components
+- Use simple conditional rendering
+- Accept callback props for user interactions
+
+❌ **DON'T:**
+
+- Use any React hooks
+- Manage state or side effects
+- Fetch data or make API calls
+- Track analytics directly
+- Implement business logic
+- Access browser APIs directly
+
+## Example: AskOrganizer
+
+### Before (Monolithic)
+
+```typescript
+"use client";
+
+import { memo } from "react";
+import { useAnalytics } from "../hooks";
+import ContentLockup from "./ContentLockup";
+import Button from "./Button";
+
+const AskOrganizer = memo(({ title, variant, ...props }) => {
+  const { trackEvent } = useAnalytics();
+
+  const handleContactClick = () => {
+    trackEvent({ event: "contact_click", component: "AskOrganizer" });
+  };
+
+  return (
+    <section>
+      <ContentLockup title={title} />
+      <Button onClick={handleContactClick}>Ask an organizer</Button>
+    </section>
+  );
+});
+```
+
+### After (Container/Presentation)
+
+**AskOrganizer.container.tsx:**
+
+```typescript
+"use client";
+
+import { memo } from "react";
+import { useAnalytics } from "../../hooks";
+import { AskOrganizerView } from "./AskOrganizer.view";
+import type { AskOrganizerProps } from "./AskOrganizer.types";
+
+function AskOrganizerContainer(props: AskOrganizerProps) {
+  const { trackEvent } = useAnalytics();
+
+  const handleContactClick = () => {
+    trackEvent({ event: "contact_click", component: "AskOrganizer" });
+  };
+
+  return <AskOrganizerView {...props} onContactClick={handleContactClick} />;
+}
+
+export default memo(AskOrganizerContainer);
+```
+
+**AskOrganizer.view.tsx:**
+
+```typescript
+import ContentLockup from "../ContentLockup";
+import Button from "../Button";
+import type { AskOrganizerViewProps } from "./AskOrganizer.types";
+
+export function AskOrganizerView({
+  title,
+  onContactClick,
+  ...props
+}: AskOrganizerViewProps) {
+  return (
+    <section>
+      <ContentLockup title={title} />
+      <Button onClick={onContactClick}>Ask an organizer</Button>
+    </section>
+  );
+}
+```
+
+## Migration Checklist
+
+When converting an existing component to this pattern:
+
+- [ ] **Identify separation points**
+  - [ ] List all hooks and state management
+  - [ ] List all event handlers and business logic
+  - [ ] List all data fetching and side effects
+  - [ ] Identify pure presentation JSX
+
+- [ ] **Create folder structure**
+  - [ ] Create `[ComponentName]/` folder
+  - [ ] Create `[ComponentName].types.ts` with shared types
+  - [ ] Create `[ComponentName].view.tsx` with pure presentation
+  - [ ] Create `[ComponentName].container.tsx` with all logic
+  - [ ] Create `index.tsx` exporting container
+
+- [ ] **Extract types**
+  - [ ] Move component props interface to `types.ts`
+  - [ ] Create view props interface extending container props
+  - [ ] Export types from `index.tsx` for external use
+
+- [ ] **Move presentation to view**
+  - [ ] Copy JSX to view component
+  - [ ] Remove all hooks and state
+  - [ ] Replace event handlers with callback props
+  - [ ] Replace computed values with props
+  - [ ] Ensure view is a pure function
+
+- [ ] **Move logic to container**
+  - [ ] Move all hooks to container
+  - [ ] Move event handlers to container
+  - [ ] Move data fetching to container
+  - [ ] Compute derived props in container
+  - [ ] Render view component with computed props
+
+- [ ] **Update exports**
+  - [ ] Export container as default from `index.tsx`
+  - [ ] Export types from `index.tsx`
+  - [ ] Delete original component file
+  - [ ] Verify import paths still work
+
+- [ ] **Update tests**
+  - [ ] Verify tests still pass (imports should resolve automatically)
+  - [ ] Update any tests that relied on implementation details
+  - [ ] Add tests for view component with mocked props if needed
+
+- [ ] **Update Storybook**
+  - [ ] Verify stories still work (imports should resolve automatically)
+  - [ ] Optionally add view-only stories with mocked props
+
+## Refactored Components
+
+The following components have been refactored to use this pattern:
+
+- ✅ **AskOrganizer** - Analytics tracking and event handlers
+- ✅ **NumberedCards** - Schema generation with `useSchemaData` hook
+- ✅ **FeatureGrid** - Memoized feature data structures
+- ✅ **WebVitalsDashboard** - Dynamic imports, data fetching, complex state
+- ✅ **Select** - Complex form state management with refs and keyboard navigation
+
+These components serve as reference implementations for the pattern.
+
+## Remaining Components
+
+The following components are candidates for future conversion:
+
+### High Priority (Complex Logic)
+
+- `Header` / `HomeHeader` - Navigation state, conditional rendering logic
+- `MenuBar` - Menu state management, keyboard navigation
+- `ContextMenu` - Positioning logic, click outside handling
+- `RadioGroup` - Group state management
+- `ToggleGroup` - Group state management
+
+### Medium Priority (Some Logic)
+
+- `ContentContainer` - Data fetching or transformation
+- `RelatedArticles` - Data fetching, filtering logic
+- `RuleStack` - Complex rendering logic
+- `LogoWall` - Animation or interaction logic
+
+### Low Priority (Mostly Presentational)
+
+- `Button`, `Avatar`, `Checkbox`, `Input`, `TextArea` - Simple presentational components
+- `Separator`, `SectionHeader`, `SectionNumber` - Pure presentation
+- `QuoteBlock`, `QuoteDecor`, `HeroDecor` - Decorative components
+
+## Best Practices
+
+1. **Start with complex components** - Components with the most logic benefit most from separation
+2. **Keep it simple** - Don't over-engineer simple presentational components
+3. **Maintain backward compatibility** - Import paths should remain unchanged
+4. **Test both layers** - Test container for logic, view for presentation
+5. **Document the pattern** - Add comments explaining non-obvious prop flows
+6. **Use TypeScript strictly** - Leverage types to enforce the separation
+
+## Additional Resources
+
+- [React Container/Presenter Pattern](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
+- [Separation of Concerns in React](https://react.dev/learn/thinking-in-react)
+
+---
+
+**Last Updated**: April 2025  
+**Maintained by**: CommunityRule Development Team
diff --git a/scripts/start-runner.sh b/scripts/start-runner.sh
deleted file mode 100755
index 29de9a6..0000000
--- a/scripts/start-runner.sh
+++ /dev/null
@@ -1,35 +0,0 @@
-#!/bin/bash
-
-echo "🚀 Starting Gitea Actions Runner..."
-
-# Ensure Node.js is available in PATH
-export PATH="/usr/local/bin:/opt/homebrew/bin:/usr/bin:/bin:$PATH"
-
-# Verify Node.js is accessible
-if ! command -v node >/dev/null 2>&1; then
-    echo "❌ Node.js not found in PATH!"
-    echo "Current PATH: $PATH"
-    exit 1
-fi
-
-echo "✅ Node.js found: $(which node) - $(node -v)"
-
-# Check if runner is already running
-if pgrep -f "act_runner daemon" > /dev/null; then
-    echo "⚠️  Runner is already running!"
-    echo "To stop it, run: ./scripts/stop-runner.sh"
-    exit 1
-fi
-
-# Start the runner in the background with proper PATH
-PATH="/usr/local/bin:/opt/homebrew/bin:/usr/bin:/bin:$PATH" ./act_runner daemon --config config/gitea-runner.yaml &
-RUNNER_PID=$!
-
-# Save PID to file for easy stopping
-echo $RUNNER_PID > .runner.pid
-
-echo "✅ Runner started with PID: $RUNNER_PID"
-echo "📝 Logs will be written to: runner.log"
-echo ""
-echo "To stop the runner, run: ./scripts/stop-runner.sh"
-echo "To check status, run: ./scripts/status-runner.sh"
diff --git a/scripts/status-runner.sh b/scripts/status-runner.sh
deleted file mode 100755
index c3749fe..0000000
--- a/scripts/status-runner.sh
+++ /dev/null
@@ -1,27 +0,0 @@
-#!/bin/bash
-
-echo "📊 Gitea Actions Runner Status"
-echo "=============================="
-
-# Check if runner is running
-if pgrep -f "act_runner daemon" > /dev/null; then
-    RUNNER_PID=$(pgrep -f "act_runner daemon")
-    echo "✅ Runner is RUNNING (PID: $RUNNER_PID)"
-    echo ""
-    echo "📝 Recent logs:"
-    if [ -f runner.log ]; then
-        tail -5 runner.log
-    else
-        echo "No log file found"
-    fi
-    echo ""
-    echo "To stop the runner: ./scripts/stop-runner.sh"
-else
-    echo "❌ Runner is NOT RUNNING"
-    echo ""
-    echo "To start the runner: ./scripts/start-runner.sh"
-fi
-
-echo ""
-echo "🔗 Gitea Actions URL:"
-echo "https://git.medlab.host/CommunityRule/community-rule/actions"
diff --git a/scripts/stop-runner.sh b/scripts/stop-runner.sh
deleted file mode 100755
index c13468d..0000000
--- a/scripts/stop-runner.sh
+++ /dev/null
@@ -1,34 +0,0 @@
-#!/bin/bash
-
-echo "🛑 Stopping Gitea Actions Runner..."
-
-# Check if PID file exists
-if [ -f .runner.pid ]; then
-    RUNNER_PID=$(cat .runner.pid)
-    
-    # Check if process is still running
-    if ps -p $RUNNER_PID > /dev/null; then
-        echo "🔄 Stopping runner with PID: $RUNNER_PID"
-        kill $RUNNER_PID
-        
-        # Wait a moment for graceful shutdown
-        sleep 2
-        
-        # Force kill if still running
-        if ps -p $RUNNER_PID > /dev/null; then
-            echo "⚡ Force stopping runner..."
-            kill -9 $RUNNER_PID
-        fi
-        
-        echo "✅ Runner stopped successfully"
-    else
-        echo "⚠️  Runner process not found (PID: $RUNNER_PID)"
-    fi
-    
-    # Clean up PID file
-    rm -f .runner.pid
-else
-    echo "🔍 No PID file found, checking for any running runners..."
-    pkill -f "act_runner daemon"
-    echo "✅ Any running runners have been stopped"
-fi
diff --git a/scripts/test-local.sh b/scripts/test-local.sh
new file mode 100755
index 0000000..af515de
--- /dev/null
+++ b/scripts/test-local.sh
@@ -0,0 +1,92 @@
+#!/bin/bash
+
+# Local testing script - run before committing/merging
+# Usage: ./scripts/test-local.sh
+
+set -euo pipefail  # Exit on error, undefined vars, pipe failures
+
+echo "🧪 Running local tests before commit..."
+echo ""
+
+# Cleanup function to ensure servers are killed
+cleanup() {
+  echo ""
+  echo "🧹 Cleaning up any running servers..."
+  # Kill any Next.js servers on common test ports
+  for port in 3000 3010; do
+    if lsof -ti:$port >/dev/null 2>&1; then
+      echo "  Killing process on port $port..."
+      lsof -ti:$port | xargs kill -9 2>/dev/null || true
+    fi
+  done
+  # Kill any processes from PID files if they exist
+  for pidfile in .next/runner.pid .next/performance-server.pid; do
+    if [ -f "$pidfile" ]; then
+      PID=$(cat "$pidfile" 2>/dev/null || echo "")
+      if [ -n "$PID" ] && kill -0 "$PID" 2>/dev/null; then
+        echo "  Killing server PID: $PID (from $pidfile)..."
+        kill -9 "$PID" 2>/dev/null || true
+      fi
+      rm -f "$pidfile"
+    fi
+  done
+}
+
+trap cleanup EXIT INT TERM
+
+echo "🔍 Linting..."
+npm run lint || exit 1
+
+echo ""
+echo "💅 Prettier check..."
+npm exec prettier -- --check "**/*.{js,jsx,ts,tsx,json,css,md}" || exit 1
+
+echo ""
+echo "📦 Component tests with coverage..."
+npm test || exit 1
+
+echo ""
+echo "🎭 E2E tests..."
+npm run test:e2e || exit 1
+
+echo ""
+echo "🖼️  Visual regression tests..."
+# Visual tests use Playwright's webServer config, should auto-start server
+npm run visual:test || exit 1
+
+echo ""
+echo "⚡ Performance tests (Lighthouse CI)..."
+# Performance tests need a server running on port 3010
+# Check if server is already running, if not start one
+if ! lsof -ti:3010 >/dev/null 2>&1; then
+  echo "  Starting server for performance tests..."
+  npm run build || exit 1
+  PORT=3010 HOST=127.0.0.1 node node_modules/next/dist/bin/next start -p 3010 -H 127.0.0.1 > .next/performance-server.log 2>&1 &
+  SERVER_PID=$!
+  echo "$SERVER_PID" > .next/performance-server.pid
+  echo "  Server started (PID: $SERVER_PID), waiting for readiness..."
+  npx wait-on -t 120000 "tcp:127.0.0.1:3010" || { echo "❌ Server failed to start"; kill $SERVER_PID 2>/dev/null || true; exit 1; }
+  echo "  ✅ Server ready"
+fi
+
+# Run performance tests
+npm run performance:budget || EXIT_CODE=$?
+
+# Cleanup performance server if we started it
+if [ -f .next/performance-server.pid ]; then
+  PID=$(cat .next/performance-server.pid 2>/dev/null || echo "")
+  if [ -n "$PID" ] && kill -0 "$PID" 2>/dev/null; then
+    echo "  Stopping performance test server..."
+    kill "$PID" 2>/dev/null || true
+    sleep 2
+    kill -9 "$PID" 2>/dev/null || true
+  fi
+  rm -f .next/performance-server.pid
+fi
+
+if [ -n "${EXIT_CODE:-}" ]; then
+  exit $EXIT_CODE
+fi
+
+echo ""
+echo "✅ All tests passed! Safe to commit/merge."