diff --git a/lib/components/FundingDetails/FundingDetails copy 2.tsx b/lib/components/FundingDetails/FundingDetails copy 2.tsx
deleted file mode 100644
index 9fc3aa105..000000000
--- a/lib/components/FundingDetails/FundingDetails copy 2.tsx	
+++ /dev/null
@@ -1,16 +0,0 @@
-export interface FundingDetailsProps {
-  image?: string
-}
-
-export const FundingDetails = ({ image }: FundingDetailsProps) => {
-  console.log('FundingDetails image prop:', image) // Debug log to check the image prop value
-
-  return (
-    <div className="bg-cu-black-50">
-      <div className="">Left</div>
-      <div className="">Right</div>
-    </div>
-  )
-}
-
-FundingDetails.displayName = 'FundingDetails'
diff --git a/lib/components/FundingDetails/FundingDetails copy.tsx b/lib/components/FundingDetails/FundingDetails copy.tsx
deleted file mode 100644
index f7bd76f2a..000000000
--- a/lib/components/FundingDetails/FundingDetails copy.tsx	
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useState } from 'react'
-
-const ERROR_IMG_SRC =
-  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
-
-const DEFAULT_IMAGE =
-  'https://fastly.picsum.photos/id/237/1200/800.jpg?hmac=Zig5Q0Oa_5oSGNOhgbpE-lgHzdREZIxTf94rVP1-uCg'
-
-export interface FundingDetailsProps {
-  image?: string
-}
-
-export const FundingDetails = ({ image }: FundingDetailsProps) => {
-  const [didError, setDidError] = useState(false)
-
-  // Sample data - replace with actual campaign data
-  const raised = 45250
-  const goal = 75000
-  const percentComplete = (raised / goal) * 100
-  const supporters = 342
-  const daysLeft = 28
-
-  return (
-    <div className="w-screen ml-offset-center mt-1.5 2xl:mt-10">
-      {/* Hero Container */}
-      <div className="max-w-screen-2xl mx-auto">
-        <div className="grid grid-cols-1 lg:grid-cols-5 min-h-[500px] lg:min-h-[600px]">
-          {/* Left Side - Campaign Content (Desktop) / Image First (Mobile) */}
-          <div className="bg-white flex items-center lg:col-span-2 order-2 lg:order-1">
-            <div className="w-full px-6 py-12 md:px-12 lg:px-12 lg:py-16">
-              {/* Header */}
-              <div className="mb-8">
-                <span className="inline-block bg-red-100 text-red-800 text-xs font-medium px-3 py-1.5 mb-4 uppercase tracking-wide">
-                  Active Campaign
-                </span>
-                <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-3">Annual Musical Production 2026</h1>
-                <p className="text-base text-gray-600">Help bring the magic of live theater to our campus community</p>
-              </div>
-
-              {/* Campaign Progress */}
-              <div className="mb-8">
-                <div className="flex items-baseline gap-3 mb-4">
-                  <span className="text-4xl font-bold text-gray-900">${raised.toLocaleString()}</span>
-                  <span className="text-base text-gray-600">of ${goal.toLocaleString()}</span>
-                </div>
-
-                {/* Progress Bar */}
-                <div className="w-full h-3 bg-gray-200 rounded-sm overflow-hidden mb-2">
-                  <div
-                    className="h-full bg-red-700 transition-all duration-500"
-                    style={{ width: `${percentComplete}%` }}
-                  />
-                </div>
-                <div className="text-sm font-medium text-gray-700">{Math.round(percentComplete)}% funded</div>
-              </div>
-
-              {/* Stats Grid */}
-              <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-2 gap-6 mb-10 pb-8 border-b border-gray-200">
-                <div className="text-center md:text-left">
-                  <div className="text-2xl font-bold text-gray-900">{Math.round(percentComplete)}%</div>
-                  <div className="text-sm text-gray-600 mt-1">Complete</div>
-                </div>
-                <div className="text-center md:text-left">
-                  <div className="text-2xl font-bold text-gray-900">{supporters}</div>
-                  <div className="text-sm text-gray-600 mt-1">Supporters</div>
-                </div>
-                <div className="text-center md:text-left">
-                  <div className="text-2xl font-bold text-gray-900">{daysLeft}</div>
-                  <div className="text-sm text-gray-600 mt-1">Days Left</div>
-                </div>
-                <div className="text-center md:text-left">
-                  <div className="text-2xl font-bold text-gray-900">${Math.round(raised / supporters)}</div>
-                  <div className="text-sm text-gray-600 mt-1">Average</div>
-                </div>
-              </div>
-
-              {/* Call to Action */}
-              <div className="flex flex-col sm:flex-row gap-4">
-                <button className="flex-1 bg-red-700 hover:bg-red-800 text-white font-bold py-4 px-8 rounded transition-colors duration-200">
-                  Fund this Project
-                </button>
-                <button className="flex-1 sm:flex-initial bg-white hover:bg-gray-50 text-gray-900 font-bold py-4 px-8 rounded border-2 border-gray-300 hover:border-gray-400 transition-colors duration-200">
-                  Learn More
-                </button>
-              </div>
-            </div>
-          </div>
-
-          {/* Right Side - Image */}
-          <div className="relative lg:h-auto lg:col-span-3 order-1 lg:order-2">
-            <img
-              src={didError ? ERROR_IMG_SRC : image || DEFAULT_IMAGE}
-              alt="Students performing in musical production"
-              className="w-full h-full object-cover !m-0 !rounded-none 2xl:!rounded-lg"
-              onError={() => setDidError(true)}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-FundingDetails.displayName = 'FundingDetails'
diff --git a/lib/components/FundingDetails/FundingDetails.stories.tsx b/lib/components/FundingDetails/FundingDetails.stories.tsx
index f19b848a4..e7c3794e0 100644
--- a/lib/components/FundingDetails/FundingDetails.stories.tsx
+++ b/lib/components/FundingDetails/FundingDetails.stories.tsx
@@ -17,7 +17,15 @@ export default meta
 type Story = StoryObj<typeof FundingDetails>
 
 export const Primary: Story = {
-  args: {},
+  args: {
+    title: 'Fund the Future of Clean Energy Research',
+    raised: 42500,
+    goal: 100000,
+    endDate: new Date(Date.now() + 45 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
+    imageUrl: 'https://picsum.photos/seed/funding/800/600',
+    imageAlt: 'Funding campaign image',
+    categories: ['Environment', 'Science & Innovation', 'Student Experience'],
+  },
   render: (args) => {
     return <FundingDetails {...args} />
   },
diff --git a/lib/components/FundingDetails/FundingDetails.tsx b/lib/components/FundingDetails/FundingDetails.tsx
index cfeb91593..4fa5e2379 100644
--- a/lib/components/FundingDetails/FundingDetails.tsx
+++ b/lib/components/FundingDetails/FundingDetails.tsx
@@ -1,29 +1,48 @@
 import { Badge } from '../Badge/Badge'
 import { BadgeGroup } from '../BadgeGroup/BadgeGroup'
-import { Button } from '../Button/Button'
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
 import { PageHeader } from '../PageHeader/PageHeader'
 import { ProgressBar } from '../ProgressBar/ProgressBar'
 import { formatCurrency } from '../../helpers/formatCurrency'
 
 interface FundingDetailsProps {
-  status: string
   title: string
   raised: number
   goal: number
+  endDate: string
   imageUrl: string
   imageAlt: string
+  categories?: string[]
 }
 
-export const FundingDetails = ({ status, title, raised, goal, imageUrl, imageAlt }: FundingDetailsProps) => {
+const getTimeRemainingLabel = (endDate: string): string => {
+  const daysLeft = Math.ceil((new Date(endDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24))
+  if (daysLeft > 365) return 'more than a year to go'
+  if (daysLeft > 30) return `${Math.round(daysLeft / 30)} months to go`
+  return `${Math.max(daysLeft, 0)} days to go`
+}
+
+export const FundingDetails = ({
+  title,
+  raised,
+  goal,
+  endDate,
+  imageUrl,
+  imageAlt,
+  categories,
+}: FundingDetailsProps) => {
   const percent = goal > 0 ? Math.min(Math.round((raised / goal) * 100), 100) : 0
+  const timeLabel = getTimeRemainingLabel(endDate)
+  const isActive = new Date(endDate).getTime() >= Date.now()
+  const statusText = isActive ? 'Active Campaign' : 'Campaign Completed'
+  const statusColor = isActive ? 'green' : 'red'
 
   return (
     <>
-      <div className="flex flex-col lg:flex-row items-stretch gap-8 lg:gap-16 lg:border-b lg:border-cu-black-300/50 lg:rounded-sm lg:pb-8">
-        <div className="lg:w-1/2 lg:py-10">
+      <div className="cu-fundingdetails flex flex-col lg:flex-row items-stretch gap-8 lg:gap-16 lg:rounded-sm ">
+        <div className="lg:py-8">
           <BadgeGroup bottom={0} gap="2" left={0} right={0} top={0}>
-            <Badge color="green" text={status} />
+            <Badge color={statusColor} text={statusText} rounded="base" />
           </BadgeGroup>
 
           <PageHeader as="h1" header={title} size="lg" noUnderline />
@@ -37,21 +56,28 @@ export const FundingDetails = ({ status, title, raised, goal, imageUrl, imageAlt
             <ProgressBar value={raised} max={goal} />
           </div>
 
-          <p className="text-sm text-cu-black-600 mb-8">{percent}% funded</p>
+          <p className="text-sm text-cu-black-600 italic">
+            {percent}% funded with {timeLabel}
+          </p>
+
+          {categories && categories.length > 0 && (
+            <BadgeGroup bottom={0} gap="2" left={0} right={0} top={0}>
+              {categories.map((cat) => (
+                <Badge key={cat} color="grey" text={cat} rounded="base" />
+              ))}
+            </BadgeGroup>
+          )}
 
           <ButtonGroup align="start" gap="5">
-            <Button onClick={() => {}} title="Fund this Project" />
+            <a href="#fund-this-campaign" className="cu-button not-prose cu-button--red">
+              Fund this Project
+            </a>
           </ButtonGroup>
         </div>
 
         {/* Image */}
-        <div className="lg:w-1/2">
-          <img
-            src={imageUrl}
-            alt={imageAlt}
-            className="w-full h-full object-cover rounded-xl !m-0"
-            // style={{ minHeight: '380px' }}
-          />
+        <div>
+          <img src={imageUrl} alt={imageAlt} className="w-full h-full object-cover rounded-xl !m-0" />
         </div>
       </div>
     </>
diff --git a/lib/components/FundingDetails/styles.css b/lib/components/FundingDetails/styles.css
index 7910c8bb0..9a24d4bd0 100644
--- a/lib/components/FundingDetails/styles.css
+++ b/lib/components/FundingDetails/styles.css
@@ -1,30 +1,3 @@
-/* TODO GLOBAL: negative top based on primary spacing */
-.cu-main > .cu-section > .cu-fullbanner:first-of-type {
-  @apply -mt-6 lg:-mt-10;
-}
-
-.cu-main > .cu-section > .cu-fullbanner:first-of-type video {
-  @apply mt-0;
-}
-
-/* TODO GLOBAL: negative bottom based on primary spacing */
-.cu-main > .cu-section--primary > .cu-fullbanner:last-child {
-  @apply -mb-6 lg:-mb-10;
-}
-
-.cu-fullbanner .cu-pageheader {
-  @apply mb-0;
-}
-
-.cu-fullbanner img {
-  @apply rounded-none m-0;
-}
-
-.cu-fullbanner h1,
-.cu-fullbanner h2,
-.cu-fullbanner h3,
-.cu-fullbanner h4,
-.cu-fullbanner h5,
-.cu-fullbanner h6 {
-  @apply text-white;
+.cu-fundingdetails p + .cu-badgegroup {
+  @apply pt-5;
 }
diff --git a/lib/examples/projects/futurefunder/SingleProject.stories.tsx b/lib/examples/projects/futurefunder/SingleProject.stories.tsx
index 745641c8c..4d3a70d81 100644
--- a/lib/examples/projects/futurefunder/SingleProject.stories.tsx
+++ b/lib/examples/projects/futurefunder/SingleProject.stories.tsx
@@ -4,6 +4,7 @@ import { Main } from '../../../layouts/Main/Main'
 import { Section } from '../../../layouts/Section/Section'
 import { FooterStandard } from '../../../components/Footer/FooterStandard/FooterStandard'
 import { Nav } from '../../../components/Nav/Nav'
+import { PageHeader } from '../../../components/PageHeader/PageHeader'
 import { FundingDetails } from '../../../components/FundingDetails/FundingDetails'
 import { NavButtonsData, NavFutureFunder } from '../../../data/NavData'
 
@@ -46,20 +47,32 @@ export const SingleProject: Story = {
       </Nav>
 
       <Main>
-        <Section as="div" maxWidth="max">
+        <Section as="div" maxWidth="7xl">
           <FundingDetails
-            status="ACTIVE CAMPAIGN"
             title="Annual Musical Production 2026"
+            endDate="2027-09-01"
             raised={45250}
             goal={75000}
+            categories={['Community', 'Health', 'Student Experience']}
             imageUrl="https://fastly.picsum.photos/id/237/1200/800.jpg?hmac=Zig5Q0Oa_5oSGNOhgbpE-lgHzdREZIxTf94rVP1-uCg"
             imageAlt="Black labrador puppy looking up"
           />
         </Section>
 
+        <PageHeader as="h2" header="The Overview" size="md" />
         <SinglePara />
+
+        <PageHeader as="h2" header="The Background" size="md" />
         <SinglePara />
+
+        <PageHeader as="h2" header="The Rollout" size="md" />
         <SinglePara />
+
+        <PageHeader as="h2" header="The Impact" size="md" />
+        <SinglePara />
+
+        <PageHeader as="h2" header="Fund this campaign" size="md" />
+        <p>The primary donation form would be placed here.</p>
       </Main>
 
       <FooterStandard />
diff --git a/lib/style.css b/lib/style.css
index 5cf5cd45d..c3489b677 100644
--- a/lib/style.css
+++ b/lib/style.css
@@ -25,6 +25,7 @@
 @import './components/Form/styles.css';
 @import './components/Form/AutoSuggest/styles.css';
 @import './components/Form/DateTime/styles.css';
+@import './components/FundingDetails/styles.css';
 @import './components/ImageGrid/styles.css';
 @import './components/Listing/styles.css';
 @import './components/Nav/priority-plus/priority-plus.css';