diff --git a/app/blog/[slug]/page.js b/app/blog/[slug]/page.js
index bf8fc54..2533b18 100644
--- a/app/blog/[slug]/page.js
+++ b/app/blog/[slug]/page.js
@@ -201,6 +201,16 @@ export default async function BlogPostPage({ params }) {
     ],
   };
 
+  // Get article-specific background color from frontmatter
+  const getBackgroundColor = (post) => {
+    if (post.frontmatter?.background?.color) {
+      return post.frontmatter.background.color;
+    }
+    return "#1F2937"; // Default fallback (dark gray)
+  };
+
+  const backgroundColor = getBackgroundColor(post);
+
   return (
     <>
       {/* Structured Data */}
@@ -217,7 +227,10 @@ export default async function BlogPostPage({ params }) {
         }}
       />
 
-      <div className="min-h-screen bg-[#F4F3F1] relative overflow-hidden">
+      <div
+        className="min-h-screen relative overflow-hidden"
+        style={{ backgroundColor }}
+      >
         {/* Content Banner */}
         <ContentBanner post={post} />
 
diff --git a/app/components/ContentBanner.js b/app/components/ContentBanner.js
index a5e4c9c..d3cc397 100644
--- a/app/components/ContentBanner.js
+++ b/app/components/ContentBanner.js
@@ -4,13 +4,24 @@ import { getAssetPath } from "../../lib/assetUtils";
 import ContentContainer from "./ContentContainer";
 
 export default function ContentBanner({ post }) {
+  // Get article-specific background image
+  const getBackgroundImage = (post) => {
+    if (post.frontmatter?.thumbnail?.horizontal) {
+      return `/content/blog/${post.frontmatter.thumbnail.horizontal}`;
+    }
+    // Fallback to default image
+    return getAssetPath("assets/Content_Banner.svg");
+  };
+
+  const backgroundImage = getBackgroundImage(post);
+
   return (
     <div className="pt-[var(--measures-spacing-016)] md:pt-[var(--measures-spacing-008)] lg:pt-[50px] xl:pt-[112px] h-[275px] sm:h-[326px] md:h-[224px] lg:h-[358.4px] xl:h-[504px] relative w-full sm:overflow-hidden">
       {/* Background SVG - Default to sm breakpoint */}
       <div
         className="absolute inset-0 w-full h-full bg-cover bg-no-repeat aspect-[320/225.5]"
         style={{
-          backgroundImage: `url(${getAssetPath("assets/Content_Banner.svg")})`,
+          backgroundImage: `url(${backgroundImage})`,
           backgroundPosition: "center bottom",
         }}
       />
@@ -19,9 +30,7 @@ export default function ContentBanner({ post }) {
       <div
         className="absolute inset-0 w-full h-full bg-cover bg-no-repeat aspect-[640/224] md:block hidden"
         style={{
-          backgroundImage: `url(${getAssetPath(
-            "assets/Content_Banner_2.svg",
-          )})`,
+          backgroundImage: `url(${backgroundImage})`,
           backgroundPosition: "center bottom",
         }}
       />
diff --git a/app/components/ContentThumbnailTemplate.js b/app/components/ContentThumbnailTemplate.js
index 44de50f..972a863 100644
--- a/app/components/ContentThumbnailTemplate.js
+++ b/app/components/ContentThumbnailTemplate.js
@@ -72,14 +72,14 @@ const ContentThumbnailTemplate = ({
       href={`/blog/${post.slug}`}
       className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
     >
-      <div className="relative min-w-[320px] h-[225.5px] overflow-hidden pt-[13.75px] pr-[76px] pb-[73.75px] pl-[14px]">
+      <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 object-bottom"
+            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" />
diff --git a/content/blog/building-community-trust.md b/content/blog/building-community-trust.md
index 5304e82..f664b7f 100644
--- a/content/blog/building-community-trust.md
+++ b/content/blog/building-community-trust.md
@@ -12,6 +12,8 @@ related:
 thumbnail:
   vertical: "building-community-trust-vertical.svg"
   horizontal: "building-community-trust-horizontal.svg"
+background:
+  color: "#EDCC8F"
 ---
 
 Trust is the foundation of any successful community organization. Without it, even the best structures and processes will struggle to function effectively. Building and maintaining trust requires intentional effort, clear communication, and consistent follow-through on commitments.
diff --git a/content/blog/operational-security-mutual-aid.md b/content/blog/operational-security-mutual-aid.md
index 2ef7cb9..4ebcd35 100644
--- a/content/blog/operational-security-mutual-aid.md
+++ b/content/blog/operational-security-mutual-aid.md
@@ -7,6 +7,8 @@ related: ["resolving-active-conflicts", "making-decisions-without-hierarchy"]
 thumbnail:
   vertical: "operational-security-mutual-aid-vertical.svg"
   horizontal: "operational-security-mutual-aid-horizontal.svg"
+background:
+  color: "#F4F3F1"
 ---
 
 Mutual aid organizations face unique security challenges. Unlike traditional nonprofits, they often operate in politically sensitive environments and may be targets of surveillance, infiltration, or repression. This guide provides practical strategies for protecting your organization and its members.
diff --git a/content/blog/resolving-active-conflicts.md b/content/blog/resolving-active-conflicts.md
index 2bf6024..2c46eb7 100644
--- a/content/blog/resolving-active-conflicts.md
+++ b/content/blog/resolving-active-conflicts.md
@@ -8,6 +8,8 @@ related:
 thumbnail:
   vertical: "resolving-active-conflicts-vertical.svg"
   horizontal: "resolving-active-conflicts-horizontal.svg"
+background:
+  color: "#E2EFFF"
 ---
 
 Many groups strive to work without bosses, managers, or traditional leadership structures. But when no one's in charge, how do decisions get made? Non-hierarchical groups often rely on collective processes that prioritize trust, transparency, and shared responsibility. These approaches can take more time upfront, but they help build stronger, more equitable communities in the long run.
diff --git a/lib/validation.js b/lib/validation.js
index f5ba039..91237d2 100644
--- a/lib/validation.js
+++ b/lib/validation.js
@@ -54,6 +54,17 @@ export const BLOG_POST_SCHEMA = {
       },
     },
   },
+  background: {
+    type: "object",
+    required: false,
+    default: null,
+    properties: {
+      color: {
+        type: "string",
+        required: false,
+      },
+    },
+  },
 };
 
 /**
@@ -149,8 +160,11 @@ export function sanitizeBlogPost(frontmatter) {
 
   for (const [field, config] of Object.entries(BLOG_POST_SCHEMA)) {
     if (frontmatter[field] !== undefined) {
-      // Special handling for thumbnail object
-      if (field === "thumbnail" && typeof frontmatter[field] === "object") {
+      // Special handling for thumbnail and background objects
+      if (
+        (field === "thumbnail" || field === "background") &&
+        typeof frontmatter[field] === "object"
+      ) {
         sanitized[field] = frontmatter[field];
       } else {
         sanitized[field] = frontmatter[field];