diff --git a/src/app/(frontend)/intelligence/campaigns/[id]/page.tsx b/src/app/(frontend)/intelligence/campaigns/[id]/page.tsx
index 77b80c3..f1d14c8 100644
--- a/src/app/(frontend)/intelligence/campaigns/[id]/page.tsx
+++ b/src/app/(frontend)/intelligence/campaigns/[id]/page.tsx
@@ -2,7 +2,7 @@ import config from "@payload-config";
 import { getPayload } from "payload";
 import { notFound } from "next/navigation";
 import Link from "next/link";
-import type { Campaign, Faction, Mission } from "@/payload-types";
+import type { Campaign, Faction, Media, Mission } from "@/payload-types";
 import { RichText } from "@payloadcms/richtext-lexical/react";
 import {
   ArrowLeftIcon,
@@ -13,13 +13,7 @@ import {
   TargetIcon,
   UsersIcon,
 } from "lucide-react";
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemHeader,
-  ItemTitle,
-} from "@/components/ui/item";
+import { Item, ItemContent, ItemDescription, ItemHeader, ItemTitle } from "@/components/ui/item";
 
 interface CampaignDetailPageProps {
   params: Promise<{ id: string }>;
@@ -48,9 +42,7 @@ const missionStatusColors: Record<string, string> = {
   Cancelled: "bg-red-500/20 text-red-400",
 };
 
-export default async function CampaignDetailPage({
-  params,
-}: CampaignDetailPageProps) {
+export default async function CampaignDetailPage({ params }: CampaignDetailPageProps) {
   const { id } = await params;
   const payload = await getPayload({ config });
 
@@ -58,7 +50,7 @@ export default async function CampaignDetailPage({
     .findByID({
       collection: "campaigns",
       id: Number(id),
-      depth: 0,
+      depth: 1,
     })
     .catch(() => null);
 
@@ -66,6 +58,12 @@ export default async function CampaignDetailPage({
     notFound();
   }
 
+  const coverImage =
+    typeof campaign.coverImage === "object" && campaign.coverImage !== null
+      ? (campaign.coverImage as Media)
+      : null;
+  const coverImageUrl = coverImage?.url ?? null;
+
   const [missionsRes, factionsRes] = await Promise.all([
     payload
       .find({
@@ -82,6 +80,7 @@ export default async function CampaignDetailPage({
           classification: true,
           ownershipAndStatus: true,
           missionRoles: true,
+          coverImage: true,
         },
       })
       .catch(() => ({ docs: [] })),
@@ -120,200 +119,220 @@ export default async function CampaignDetailPage({
   }
 
   return (
-    <div className="p-5 flex flex-col gap-6 max-w-7xl">
-      <Link
-        href="/intelligence/campaigns"
-        className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center gap-1 w-fit"
-      >
-        <ArrowLeftIcon className="size-3" />
-        Back to Campaigns
-      </Link>
-
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex flex-col gap-1">
-          <div className="flex items-center gap-2">
-            <ShieldIcon className="size-5 text-muted-foreground" />
-            <h1 className="text-lg font-semibold">{campaign.name}</h1>
-          </div>
-          <div className="flex items-center gap-2">
-            <span
-              className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${statusColors[campaign.status] ?? "bg-muted text-muted-foreground"}`}
-            >
-              {campaign.status === "inProgress"
-                ? "In Progress"
-                : campaign.status.charAt(0).toUpperCase() +
-                  campaign.status.slice(1)}
-            </span>
-            {startDate && (
-              <span className="text-xs text-muted-foreground flex items-center gap-1">
-                <CalendarDaysIcon className="size-3" />
-                {startDate}
-                {endDate ? ` — ${endDate}` : " — Present"}
-              </span>
-            )}
-          </div>
+    <div className="flex flex-col">
+      <header className="relative min-h-[500px] w-full overflow-hidden bg-background">
+        <div className="absolute top-0 left-0 px-5 pt-5 pb-3 z-10">
+          <Link
+            href="/intelligence/campaigns"
+            className="flex w-fit items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-primary"
+          >
+            <ArrowLeftIcon className="size-3" />
+            Back to Campaigns
+          </Link>
         </div>
-      </div>
+        {coverImageUrl ? (
+          <img
+            src={coverImageUrl}
+            alt=""
+            fetchPriority="high"
+            className="absolute inset-0 size-full object-cover opacity-70"
+          />
+        ) : (
+          <div className="absolute inset-0 bg-gradient-to-b from-muted/40 to-background" />
+        )}
+        <div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-background" />
+        <div className="absolute inset-0 bg-gradient-to-r from-black/30 via-transparent to-black/40" />
 
-      <p className="text-sm text-muted-foreground">{campaign.summary}</p>
+        <div className="absolute top-4 right-4 z-20 flex gap-2">
+          <span
+            className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${statusColors[campaign.status] ?? "bg-muted text-muted-foreground"}`}
+          >
+            {campaign.status === "inProgress"
+              ? "In Progress"
+              : campaign.status.charAt(0).toUpperCase() + campaign.status.slice(1)}
+          </span>
+        </div>
 
-      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
-        {/* ── Main Content (2/3) ──────────────────────────── */}
-        <div className="xl:col-span-2 flex flex-col gap-6">
-          {campaign.description && (
-            <Item variant="outline">
-              <ItemHeader>
-                <ItemTitle>Description</ItemTitle>
-              </ItemHeader>
-              <ItemContent className="prose-invert prose-sm max-w-none [&_p]:mb-2 [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4 [&_strong]:text-foreground [&_em]:italic">
-                <RichText data={campaign.description} />
-              </ItemContent>
-            </Item>
-          )}
-
-          <section className="flex flex-col gap-3">
-            <div className="flex items-center justify-between">
-              <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
-                Missions
-              </h2>
-              <span className="text-xs text-muted-foreground">
-                {missions.length} mission{missions.length !== 1 ? "s" : ""}
-              </span>
+        <div className="absolute inset-0 flex flex-col items-center justify-center p-6 md:p-10 lg:p-12 text-center">
+          <h1
+            id="campaign-title"
+            className="text-5xl font-bold tracking-tight text-white drop-shadow-2xl md:text-6xl"
+          >
+            {campaign.name}
+          </h1>
+          <p className="mt-3 max-w-3xl text-lg leading-relaxed text-white/80">{campaign.summary}</p>
+          {(startDate || endDate) && (
+            <div className="mt-6 flex items-center gap-2 text-sm text-white/70">
+              <CalendarDaysIcon className="size-4 text-white/60" />
+              {startDate && <span>{startDate}</span>}
+              {startDate && endDate && <span>—</span>}
+              {endDate ? <span>{endDate}</span> : startDate ? <span>Present</span> : null}
             </div>
-            {missions.length > 0 ? (
-              <div className="flex flex-col gap-2">
-                {missions.map((mission) => (
-                  <Link
-                    key={mission.id}
-                    href={`/intelligence/missions/${mission.id}`}
-                  >
-                    <Item
-                      variant="outline"
-                      className="cursor-pointer group transition-all duration-200 hover:scale-[1.01]"
-                    >
-                      <ItemHeader>
-                        <div className="flex flex-col gap-0.5">
-                          <span className="font-mono text-xs text-muted-foreground">
-                            {mission.codeName}
-                          </span>
-                          <ItemTitle>{mission.name}</ItemTitle>
-                        </div>
-                        <span
-                          className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${
-                            missionStatusColors[
-                              mission.ownershipAndStatus.status
-                            ] ?? "bg-muted text-muted-foreground"
-                          }`}
-                        >
-                          {mission.ownershipAndStatus.status}
-                        </span>
-                      </ItemHeader>
-                      <ItemContent>
-                        <ItemDescription className="line-clamp-1">
-                          {mission.summary}
-                        </ItemDescription>
-                      </ItemContent>
-                    </Item>
-                  </Link>
-                ))}
-              </div>
-            ) : (
-              <Item variant="muted">
-                <ItemContent>
-                  <p className="text-sm text-muted-foreground italic">
-                    No missions in this campaign yet.
-                  </p>
+          )}
+        </div>
+      </header>
+
+      <div className="p-5 flex flex-col gap-6 max-w-7xl mx-auto w-full">
+        <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+          {/* ── Main Content (2/3) ──────────────────────────── */}
+          <div className="xl:col-span-2 flex flex-col gap-6">
+            {campaign.description && (
+              <Item variant="outline">
+                <ItemHeader>
+                  <ItemTitle>Description</ItemTitle>
+                </ItemHeader>
+                <ItemContent className="prose-invert prose-sm max-w-none [&_p]:mb-2 [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4 [&_strong]:text-foreground [&_em]:italic">
+                  <RichText data={campaign.description} />
                 </ItemContent>
               </Item>
             )}
-          </section>
-        </div>
 
-        {/* ── Right Sidebar (1/3) ─────────────────────────── */}
-        <div className="flex flex-col gap-4">
-          {/* Campaign Stats */}
-          <Item variant="outline">
-            <ItemHeader>
-              <div className="flex items-center gap-2">
-                <TargetIcon className="size-4 text-muted-foreground" />
-                <ItemTitle>Campaign Stats</ItemTitle>
+            <section className="flex flex-col gap-3">
+              <div className="flex items-center justify-between">
+                <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+                  Missions
+                </h2>
+                <span className="text-xs text-muted-foreground">
+                  {missions.length} mission{missions.length !== 1 ? "s" : ""}
+                </span>
               </div>
-            </ItemHeader>
-            <ItemContent>
-              <div className="flex flex-col gap-2">
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">Total Missions</span>
-                  <span className="font-semibold">{missions.length}</span>
-                </div>
-                {Object.entries(statusCounts).map(([status, count]) => (
-                  <div key={status} className="flex justify-between text-sm">
-                    <span className="flex items-center gap-1.5">
-                      <span
-                        className={`size-2 rounded-full ${missionStatusColors[status]?.split(" ")[0] ?? "bg-muted"}`}
-                      />
-                      <span className="text-muted-foreground">{status}</span>
-                    </span>
-                    <span className="font-mono">{count}</span>
-                  </div>
-                ))}
-                {campaign.startDate && (
-                  <div className="flex justify-between text-sm pt-1 border-t border-border/50">
-                    <span className="text-muted-foreground">Duration</span>
-                    <span>
-                      {startDate}
-                      {endDate ? ` — ${endDate}` : " — Present"}
-                    </span>
-                  </div>
-                )}
-              </div>
-            </ItemContent>
-          </Item>
-
-          {/* Faction Roster */}
-          {factions.length > 0 && (
-            <Item variant="outline">
-              <ItemHeader>
-                <div className="flex items-center gap-2">
-                  <UsersIcon className="size-4 text-muted-foreground" />
-                  <ItemTitle>Faction Roster</ItemTitle>
-                </div>
-                <Link
-                  href="/intelligence/factions"
-                  className="text-xs text-muted-foreground hover:text-primary transition-colors"
-                >
-                  View all
-                </Link>
-              </ItemHeader>
-              <ItemContent>
+              {missions.length > 0 ? (
                 <div className="flex flex-col gap-2">
-                  {factions.map((faction) => (
-                    <Link
-                      key={faction.id}
-                      href="/intelligence/factions"
-                      className="flex items-center gap-3 p-1.5 rounded-md hover:bg-muted/50 transition-colors group"
-                    >
-                      <ShieldIcon className="size-4 text-muted-foreground shrink-0" />
-                      <div className="flex flex-col gap-0.5 min-w-0 flex-1">
-                        <span className="text-sm font-medium truncate group-hover:text-primary transition-colors">
-                          {faction.name}
-                        </span>
-                        <span
-                          className={`text-[10px] font-semibold uppercase tracking-wider px-1 py-0.5 rounded w-fit ${factionTypeColors[faction.type] ?? "bg-muted text-muted-foreground"}`}
-                        >
-                          {faction.type === "majorFaction"
-                            ? "Major"
-                            : faction.type === "minorFaction"
-                              ? "Minor"
-                              : faction.type}
-                        </span>
-                      </div>
-                      <ChevronRightIcon className="size-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
+                  {missions.map((mission) => (
+                    <Link key={mission.id} href={`/intelligence/missions/${mission.id}`}>
+                      <Item
+                        variant="outline"
+                        className="cursor-pointer group transition-all duration-200 hover:scale-[1.01] group relative border border-transparent hover:border-white/75"
+                      >
+                        <div className="absolute inset-0 pointer-events-none opacity-25 overflow-hidden after:bg-linear-0 after:bg-linear-180 after:from-transparent after:to-black/42 after:inset-0 after:z-10 after:absolute group-hover:after:opacity-0 after:transition-opacity">
+                          <img
+                            src={(mission.coverImage as Media)?.url ?? undefined}
+                            className="w-full h-full aspect-video object-cover object-center"
+                          />
+                        </div>
+                        <ItemHeader>
+                          <div className="flex flex-col gap-0.5">
+                            <span className="font-mono text-xs text-muted-foreground">
+                              {mission.codeName}
+                            </span>
+                            <ItemTitle>{mission.name}</ItemTitle>
+                          </div>
+                          <span
+                            className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${
+                              missionStatusColors[mission.ownershipAndStatus.status] ??
+                              "bg-muted text-muted-foreground"
+                            }`}
+                          >
+                            {mission.ownershipAndStatus.status}
+                          </span>
+                        </ItemHeader>
+                        <ItemContent>
+                          <ItemDescription className="line-clamp-1">
+                            {mission.summary}
+                          </ItemDescription>
+                        </ItemContent>
+                      </Item>
                     </Link>
                   ))}
                 </div>
+              ) : (
+                <Item variant="muted">
+                  <ItemContent>
+                    <p className="text-sm text-muted-foreground italic">
+                      No missions in this campaign yet.
+                    </p>
+                  </ItemContent>
+                </Item>
+              )}
+            </section>
+          </div>
+
+          {/* ── Right Sidebar (1/3) ─────────────────────────── */}
+          <div className="flex flex-col gap-4">
+            {/* Campaign Stats */}
+            <Item variant="outline">
+              <ItemHeader>
+                <div className="flex items-center gap-2">
+                  <TargetIcon className="size-4 text-muted-foreground" />
+                  <ItemTitle>Campaign Stats</ItemTitle>
+                </div>
+              </ItemHeader>
+              <ItemContent>
+                <div className="flex flex-col gap-2">
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">Total Missions</span>
+                    <span className="font-semibold">{missions.length}</span>
+                  </div>
+                  {Object.entries(statusCounts).map(([status, count]) => (
+                    <div key={status} className="flex justify-between text-sm">
+                      <span className="flex items-center gap-1.5">
+                        <span
+                          className={`size-2 rounded-full ${missionStatusColors[status]?.split(" ")[0] ?? "bg-muted"}`}
+                        />
+                        <span className="text-muted-foreground">{status}</span>
+                      </span>
+                      <span className="font-mono">{count}</span>
+                    </div>
+                  ))}
+                  {campaign.startDate && (
+                    <div className="flex justify-between text-sm pt-1 border-t border-border/50">
+                      <span className="text-muted-foreground">Duration</span>
+                      <span>
+                        {startDate}
+                        {endDate ? ` — ${endDate}` : " — Present"}
+                      </span>
+                    </div>
+                  )}
+                </div>
               </ItemContent>
             </Item>
-          )}
+
+            {/* Faction Roster */}
+            {factions.length > 0 && (
+              <Item variant="outline">
+                <ItemHeader>
+                  <div className="flex items-center gap-2">
+                    <UsersIcon className="size-4 text-muted-foreground" />
+                    <ItemTitle>Faction Roster</ItemTitle>
+                  </div>
+                  <Link
+                    href="/intelligence/factions"
+                    className="text-xs text-muted-foreground hover:text-primary transition-colors"
+                  >
+                    View all
+                  </Link>
+                </ItemHeader>
+                <ItemContent>
+                  <div className="flex flex-col gap-2">
+                    {factions.map((faction) => (
+                      <Link
+                        key={faction.id}
+                        href="/intelligence/factions"
+                        className="flex items-center gap-3 p-1.5 rounded-md hover:bg-muted/50 transition-colors group"
+                      >
+                        <ShieldIcon className="size-4 text-muted-foreground shrink-0" />
+                        <div className="flex flex-col gap-0.5 min-w-0 flex-1">
+                          <span className="text-sm font-medium truncate group-hover:text-primary transition-colors">
+                            {faction.name}
+                          </span>
+                          <span
+                            className={`text-[10px] font-semibold uppercase tracking-wider px-1 py-0.5 rounded w-fit ${factionTypeColors[faction.type] ?? "bg-muted text-muted-foreground"}`}
+                          >
+                            {faction.type === "majorFaction"
+                              ? "Major"
+                              : faction.type === "minorFaction"
+                                ? "Minor"
+                                : faction.type}
+                          </span>
+                        </div>
+                        <ChevronRightIcon className="size-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
+                      </Link>
+                    ))}
+                  </div>
+                </ItemContent>
+              </Item>
+            )}
+          </div>
         </div>
       </div>
     </div>