diff --git a/src/app/(marketing)/donation/success/page.tsx b/src/app/(marketing)/donation/success/page.tsx
index c5953ef..ab4e9f7 100644
--- a/src/app/(marketing)/donation/success/page.tsx
+++ b/src/app/(marketing)/donation/success/page.tsx
@@ -10,6 +10,7 @@ import { Button } from "@/shared/ui/button"
 import { apiFetch } from "@/shared/lib/api-fetch"
 import { queryKeys } from "@/shared/lib/query-keys"
 import type { Donation } from "@/features/admin/donations/types"
+import { computeDonationTotal } from "@/features/marketing/lib/donation-pricing"
 
 function DonationSuccessContent() {
   const searchParams = useSearchParams()
@@ -58,7 +59,7 @@ function DonationSuccessContent() {
         <p className="max-w-md text-lg text-muted-foreground">
           Your donation of{" "}
           <span className="font-semibold text-ma-text">
-            ${Number(donation?.amount ?? 0).toFixed(2)} USD
+            ${computeDonationTotal(Number(donation?.amount ?? 0)).toFixed(2)} USD
           </span>{" "}
           has been received. Your support helps us make a real impact.
         </p>
diff --git a/src/app/(user)/dashboard/page.tsx b/src/app/(user)/dashboard/page.tsx
index 9d3ce84..0abb824 100644
--- a/src/app/(user)/dashboard/page.tsx
+++ b/src/app/(user)/dashboard/page.tsx
@@ -58,7 +58,7 @@ export default function UserDashboardPage() {
   }, [enrollments])
 
   return (
-    <div className="mx-auto px-4 py-8 lg:max-w-7xl lg:px-25 lg:py-19.25 2xl:max-w-360 2xl:px-50">
+    <div className="marketing-container py-8! sm:py-19.25!">
       <div className="mb-[70px] flex items-center gap-4 lg:mb-26.75">
         <UserAvatar user={user} className="size-[50px] lg:size-12.5" />
         <p className="text-xl font-bold text-ma-text lg:text-2xl">
@@ -73,11 +73,11 @@ export default function UserDashboardPage() {
       </div>
 
       {isLoading ? (
-        <div className="grid justify-items-center gap-5 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
           {Array.from({ length: 6 }).map((_, i) => (
             <div
               key={i}
-              className="flex w-full flex-col gap-5 sm:max-w-[334px]"
+              className="flex w-full flex-col gap-5 sm:max-w-[300px]"
             >
               <Skeleton className="h-[254px] rounded-card-2" />
               <div className="flex flex-col gap-2 px-2.5">
@@ -116,7 +116,7 @@ export default function UserDashboardPage() {
           </ErrorStateAction>
         </ErrorState>
       ) : (
-        <div className="grid justify-items-center gap-5 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
           {courses?.map((course) => {
             const enrolledProgress = enrollmentMap.get(course.id)
             const isEnrolled = enrolledProgress !== undefined
@@ -124,7 +124,11 @@ export default function UserDashboardPage() {
             return (
               <CourseCard.Root
                 key={course.id}
-                href={isEnrolled ? `/my-learning/${course.id}` : `/dashboard/course/${course.id}`}
+                href={
+                  isEnrolled
+                    ? `/my-learning/${course.id}`
+                    : `/dashboard/course/${course.id}`
+                }
               >
                 <CourseCard.Thumbnail
                   src={course.thumbnailUrl}
diff --git a/src/app/api/donations/route.ts b/src/app/api/donations/route.ts
index 11b5f6f..a823877 100644
--- a/src/app/api/donations/route.ts
+++ b/src/app/api/donations/route.ts
@@ -5,6 +5,7 @@ import { eq } from "drizzle-orm"
 import { db } from "@/infrastructure/database/client"
 import { donations } from "@/infrastructure/database/schema/donation"
 import { getStripe } from "@/infrastructure/payment/stripe"
+import { computeDonationTotal } from "@/features/marketing/lib/donation-pricing"
 import * as Sentry from "@sentry/nextjs"
 
 export async function POST(request: Request) {
@@ -65,6 +66,7 @@ export async function POST(request: Request) {
       `${request.headers.get("x-forwarded-proto") ?? "https"}://${request.headers.get("host") ?? "localhost:3000"}`
 
     const stripe = getStripe()
+    const total = computeDonationTotal(amount)
     const session = await stripe.checkout.sessions.create({
       mode: "payment",
       customer_email: donorEmail,
@@ -72,7 +74,7 @@ export async function POST(request: Request) {
         {
           price_data: {
             currency: "usd",
-            unit_amount: Math.round(amount * 100),
+            unit_amount: Math.round(total * 100),
             product_data: {
               name: "Donation to Modern Advocates",
             },
diff --git a/src/app/globals.css b/src/app/globals.css
index 01ba7ae..a491095 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -188,6 +188,9 @@
 }
 
 @layer utilities {
+  .marketing-container {
+    @apply mx-auto px-4 py-12.5 sm:py-25 lg:max-w-7xl lg:px-25 2xl:max-w-360;
+  }
   .hide-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;
diff --git a/src/features/courses/components/course-card.tsx b/src/features/courses/components/course-card.tsx
index 4604aa4..e72cf91 100644
--- a/src/features/courses/components/course-card.tsx
+++ b/src/features/courses/components/course-card.tsx
@@ -13,7 +13,7 @@ function Root({ href, children }: RootProps) {
   return (
     <Link
       href={href}
-      className="group flex w-full flex-col gap-5 rounded-card-2 border border-ma-border-light bg-white px-2.5 pt-2.5 pb-7.5 transition-colors duration-300 hover:bg-gray-50 sm:max-w-[334px]"
+      className="group flex w-full flex-col gap-5 rounded-card-2 border border-ma-border-light bg-white px-2.5 pt-2.5 pb-7.5 transition-colors duration-300 hover:bg-gray-50 sm:max-w-[400px]"
     >
       {children}
     </Link>
@@ -73,7 +73,9 @@ function Title({
 
 function Tutor({ name }: { name: string | null }) {
   return (
-    <p className="text-sm leading-normal font-medium text-muted-foreground">{name}</p>
+    <p className="text-sm leading-normal font-medium text-muted-foreground">
+      {name}
+    </p>
   )
 }
 
@@ -81,10 +83,7 @@ function Rating({ avg, count }: { avg: number; count: number }) {
   return (
     <div className="flex flex-wrap items-center gap-2">
       <span className="inline-flex items-center gap-1 rounded-md border border-border p-[5px] text-sm leading-normal font-medium text-muted-foreground">
-        <Star
-          className="size-5 fill-ma-star text-ma-star"
-          aria-hidden="true"
-        />
+        <Star className="size-5 fill-ma-star text-ma-star" aria-hidden="true" />
         {Number(avg).toFixed(1)}
       </span>
       <span className="inline-flex items-center rounded-md border border-border px-[5px] py-1.5 text-sm leading-normal font-medium text-muted-foreground">
@@ -138,7 +137,9 @@ function DisplayPrice({
   className?: string
 }) {
   return (
-    <p className={cn("text-base text-muted-foreground line-through", className)}>
+    <p
+      className={cn("text-base text-muted-foreground line-through", className)}
+    >
       $ {displayPrice?.toFixed(2)} USD
     </p>
   )
diff --git a/src/features/courses/components/enroll-now-button.tsx b/src/features/courses/components/enroll-now-button.tsx
index 646863b..45b6d83 100644
--- a/src/features/courses/components/enroll-now-button.tsx
+++ b/src/features/courses/components/enroll-now-button.tsx
@@ -24,7 +24,9 @@ export function EnrollNowButton({
     queryKey: queryKeys.enrollment.check(courseId),
     queryFn: async () => {
       try {
-        return await apiFetch<{ enrolled: boolean }>(`/api/enrollments/check/${courseId}`)
+        return await apiFetch<{ enrolled: boolean }>(
+          `/api/enrollments/check/${courseId}`
+        )
       } catch {
         return { enrolled: false }
       }
@@ -80,7 +82,7 @@ export function EnrollNowButton({
     <Button asChild className="group relative overflow-hidden rounded-pill">
       <Link
         href={href}
-        className="flex h-pill w-full items-center justify-center gap-2.5 rounded-pill bg-ma-text px-5 py-4 text-base font-semibold text-white"
+        className="flex h-pill w-full items-center justify-center gap-2.5 rounded-pill bg-ma-admin-primary px-5 py-4 text-base font-semibold text-white"
       >
         <span className="relative z-10 inline-flex items-center gap-2.5">
           {label}
diff --git a/src/features/marketing/components/about-hero-section.tsx b/src/features/marketing/components/about-hero-section.tsx
index fe8fed4..a99bdff 100644
--- a/src/features/marketing/components/about-hero-section.tsx
+++ b/src/features/marketing/components/about-hero-section.tsx
@@ -10,8 +10,8 @@ const supporters = [
 
 export function AboutHeroSection() {
   return (
-    <section className="bg-white py-12.5 text-ma-text lg:py-25">
-      <div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360">
+    <section className="bg-white text-ma-text">
+      <div className="marketing-container">
         <header className="mx-auto mb-15 max-w-230 text-center">
           <h4 className="mb-7.5 text-base text-muted-foreground uppercase">
             Our story
diff --git a/src/features/marketing/components/about-our-values-section.tsx b/src/features/marketing/components/about-our-values-section.tsx
index a8bc674..532f02b 100644
--- a/src/features/marketing/components/about-our-values-section.tsx
+++ b/src/features/marketing/components/about-our-values-section.tsx
@@ -4,8 +4,8 @@ import { Gift } from "lucide-react"
 
 const AboutOurValuesSection = () => {
   return (
-    <section id="about" className="bg-white py-12.5 lg:py-25">
-      <div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
+    <section id="about" className="bg-white">
+      <div className="marketing-container">
         <p className="mb-5 text-center text-sm leading-normal font-medium tracking-[10%] text-muted-foreground uppercase sm:text-base">
           OUR VALUES{" "}
         </p>
diff --git a/src/features/marketing/components/about-support-mission-section.tsx b/src/features/marketing/components/about-support-mission-section.tsx
index 95d22f3..81c57d7 100644
--- a/src/features/marketing/components/about-support-mission-section.tsx
+++ b/src/features/marketing/components/about-support-mission-section.tsx
@@ -5,9 +5,9 @@ import React from "react"
 
 const AboutSupportMissionSection = () => {
   return (
-    <section className="">
-      <div className="mx-auto flex flex-col items-center px-4 py-12.5 sm:gap-50 sm:py-25 lg:max-w-7xl lg:px-25 2xl:max-w-360">
-        <div className="flex flex-col gap-12 sm:flex-row sm:items-center sm:gap-25">
+    <section>
+      <div className="marketing-container flex flex-col items-center border sm:gap-50">
+        <div className="flex w-full flex-col gap-12 sm:flex-row sm:items-center sm:gap-25">
           <Image
             src={"/figma-home/community.png"}
             alt="People putting hands together"
@@ -26,7 +26,7 @@ const AboutSupportMissionSection = () => {
               education, and health advocacy.
             </p>
 
-            <Button className="h-13 w-full self-start rounded-pill sm:w-75 sm:max-w-75">
+            <Button className="h-15 w-full self-start rounded-pill sm:w-75 sm:max-w-75">
               Support our mission <ArrowRight />
             </Button>
           </div>
diff --git a/src/features/marketing/components/community-section.tsx b/src/features/marketing/components/community-section.tsx
index 9ae7ea8..6a3db98 100644
--- a/src/features/marketing/components/community-section.tsx
+++ b/src/features/marketing/components/community-section.tsx
@@ -4,7 +4,7 @@ import React from "react"
 const CommunitySection = () => {
   return (
     <section className="">
-      <div className="mx-auto flex flex-col-reverse items-center gap-12 px-4 py-12.5 sm:flex-row sm:gap-25 sm:py-25 lg:max-w-7xl lg:px-25 2xl:max-w-360">
+      <div className="marketing-container flex flex-col-reverse items-center gap-12 sm:flex-row sm:gap-25">
         <Image
           src="/figma-home/community.png"
           alt="People putting hands together"
diff --git a/src/features/marketing/components/contact-hero-section.tsx b/src/features/marketing/components/contact-hero-section.tsx
index c61c671..c08abf3 100644
--- a/src/features/marketing/components/contact-hero-section.tsx
+++ b/src/features/marketing/components/contact-hero-section.tsx
@@ -39,11 +39,14 @@ export function ContactHeroSection({
   defaultName = "",
   defaultEmail = "",
 }: ContactHeroSectionProps) {
-  const { form, submitting, onSubmit } = useContactForm({ name: defaultName, email: defaultEmail })
+  const { form, submitting, onSubmit } = useContactForm({
+    name: defaultName,
+    email: defaultEmail,
+  })
 
   return (
-    <section id="contact" className="bg-white py-12.5 text-ma-text lg:py-25">
-      <div className="mx-auto grid items-start gap-14 px-4 lg:max-w-7xl lg:grid-cols-[444px_1fr] lg:gap-[88px] lg:px-25 2xl:max-w-360 2xl:px-50">
+    <section id="contact" className="bg-white text-ma-text">
+      <div className="marketing-container grid items-start gap-14 lg:grid-cols-[444px_1fr] lg:gap-[88px]">
         <div className="flex flex-col gap-10">
           <div className="flex flex-col gap-5 lg:gap-[30px]">
             <p className="text-base leading-normal font-medium tracking-[0.1em] text-muted-foreground uppercase">
@@ -117,7 +120,10 @@ export function ContactHeroSection({
               name="name"
               render={({ field, fieldState }) => (
                 <Field data-invalid={fieldState.invalid}>
-                  <FieldLabel htmlFor={field.name} className="text-lg font-normal text-ma-text">
+                  <FieldLabel
+                    htmlFor={field.name}
+                    className="text-lg font-normal text-ma-text"
+                  >
                     Full Name
                   </FieldLabel>
                   <Input
@@ -128,7 +134,9 @@ export function ContactHeroSection({
                     aria-invalid={fieldState.invalid}
                     className="h-9 rounded-md border-border bg-white px-2.5 py-2.5 text-base placeholder:text-muted-foreground"
                   />
-                  {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
                 </Field>
               )}
             />
@@ -139,7 +147,10 @@ export function ContactHeroSection({
                 name="email"
                 render={({ field, fieldState }) => (
                   <Field data-invalid={fieldState.invalid}>
-                    <FieldLabel htmlFor={field.name} className="text-lg font-normal text-ma-text">
+                    <FieldLabel
+                      htmlFor={field.name}
+                      className="text-lg font-normal text-ma-text"
+                    >
                       Email
                     </FieldLabel>
                     <Input
@@ -151,7 +162,9 @@ export function ContactHeroSection({
                       aria-invalid={fieldState.invalid}
                       className="h-9 rounded-md border-border bg-white px-2.5 py-2.5 text-base placeholder:text-muted-foreground"
                     />
-                    {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
                   </Field>
                 )}
               />
@@ -161,7 +174,10 @@ export function ContactHeroSection({
                 name="phone"
                 render={({ field, fieldState }) => (
                   <Field data-invalid={fieldState.invalid}>
-                    <FieldLabel htmlFor={field.name} className="text-lg font-normal text-ma-text">
+                    <FieldLabel
+                      htmlFor={field.name}
+                      className="text-lg font-normal text-ma-text"
+                    >
                       Phone number
                     </FieldLabel>
                     <Input
@@ -173,7 +189,9 @@ export function ContactHeroSection({
                       aria-invalid={fieldState.invalid}
                       className="h-9 rounded-md border-border bg-white px-2.5 py-2.5 text-base placeholder:text-muted-foreground"
                     />
-                    {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
                   </Field>
                 )}
               />
@@ -184,7 +202,10 @@ export function ContactHeroSection({
               name="message"
               render={({ field, fieldState }) => (
                 <Field data-invalid={fieldState.invalid}>
-                  <FieldLabel htmlFor={field.name} className="text-lg font-normal text-ma-text">
+                  <FieldLabel
+                    htmlFor={field.name}
+                    className="text-lg font-normal text-ma-text"
+                  >
                     Message
                   </FieldLabel>
                   <textarea
@@ -194,7 +215,9 @@ export function ContactHeroSection({
                     aria-invalid={fieldState.invalid}
                     className="h-[180px] w-full min-w-0 resize-none rounded-md border border-border bg-white px-2.5 py-2.5 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20"
                   />
-                  {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
                 </Field>
               )}
             />
@@ -204,7 +227,12 @@ export function ContactHeroSection({
               disabled={submitting}
               className="mt-1 w-full"
             >
-              {submitting && <LoaderCircle className="size-4 animate-spin" aria-hidden="true" />}
+              {submitting && (
+                <LoaderCircle
+                  className="size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
               Send your message
               <ArrowRight
                 className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]"
diff --git a/src/features/marketing/components/course-detail-content-section.tsx b/src/features/marketing/components/course-detail-content-section.tsx
index c860259..6c98be7 100644
--- a/src/features/marketing/components/course-detail-content-section.tsx
+++ b/src/features/marketing/components/course-detail-content-section.tsx
@@ -22,8 +22,24 @@ type CourseContentData = {
   avgRating: number
   reviewCount: number
   enrollmentCount: number
-  modules: { id: string; title: string; sortOrder: number; topics: { id: string; title: string; format: string; content: string | null }[] }[]
-  reviews: { id: string; body: string | null; rating: number; studentName: string | null; studentImage: string | null }[]
+  modules: {
+    id: string
+    title: string
+    sortOrder: number
+    topics: {
+      id: string
+      title: string
+      format: string
+      content: string | null
+    }[]
+  }[]
+  reviews: {
+    id: string
+    body: string | null
+    rating: number
+    studentName: string | null
+    studentImage: string | null
+  }[]
 }
 
 export function CourseDetailContentSection({
@@ -33,7 +49,7 @@ export function CourseDetailContentSection({
 }) {
   return (
     <section className="bg-white py-10 text-ma-text lg:py-20">
-      <div className="mx-auto flex flex-col-reverse gap-12 px-4 lg:grid lg:max-w-7xl lg:grid-cols-[0.6fr_0.4fr] lg:items-start lg:justify-between lg:px-25 xl:grid-cols-[598px_335px] 2xl:max-w-360 2xl:px-50">
+      <div className="marketing-container flex flex-col-reverse gap-12 py-0! sm:py-0 lg:grid lg:grid-cols-[0.6fr_0.4fr] lg:items-start lg:justify-between xl:grid-cols-[598px_335px] 2xl:grid-cols-[650px_400px]">
         <div className="flex w-full max-w-[598px] flex-col gap-[30px]">
           <section className="flex flex-col gap-4">
             <h2 className="text-xl/[100%] leading-normal font-extrabold text-ma-text sm:text-2xl">
diff --git a/src/features/marketing/components/course-detail-hero-section.tsx b/src/features/marketing/components/course-detail-hero-section.tsx
index 6e4575d..d9d329a 100644
--- a/src/features/marketing/components/course-detail-hero-section.tsx
+++ b/src/features/marketing/components/course-detail-hero-section.tsx
@@ -16,15 +16,28 @@ type CourseHeroData = {
   enrollmentCount: number
 }
 
-export function CourseDetailHeroSection({ course, breadcrumbHref = "/courses" }: { course: CourseHeroData; breadcrumbHref?: string }) {
+export function CourseDetailHeroSection({
+  course,
+  breadcrumbHref = "/courses",
+}: {
+  course: CourseHeroData
+  breadcrumbHref?: string
+}) {
   const displayPrice = course.discountedPrice ?? course.price
 
   return (
     <section className="bg-ma-surface-2 py-10 text-ma-text sm:py-[90px] lg:py-16">
-      <div className="mx-auto grid gap-5 rounded-card-2 px-4 lg:max-w-7xl lg:grid-cols-2 lg:px-25 2xl:max-w-360 2xl:px-50">
+      <div className="marketing-container grid gap-5 py-0! sm:grid-cols-2 sm:py-0">
         <div className="relative min-h-[360px] overflow-hidden rounded-card-2 sm:min-h-[428px]">
           {course.thumbnailUrl ? (
-            <Image src={course.thumbnailUrl} alt={`${course.title} thumbnail`} fill priority sizes="(min-width: 1024px) 510px, calc(100vw - 48px)" className="object-cover" />
+            <Image
+              src={course.thumbnailUrl}
+              alt={`${course.title} thumbnail`}
+              fill
+              priority
+              sizes="(min-width: 1024px) 510px, calc(100vw - 48px)"
+              className="object-cover"
+            />
           ) : (
             <div className="flex h-full items-center justify-center bg-gray-100" />
           )}
@@ -32,15 +45,30 @@ export function CourseDetailHeroSection({ course, breadcrumbHref = "/courses" }:
 
         <div className="flex flex-col justify-between px-0 py-2 lg:min-h-107 lg:px-2.5 lg:py-0">
           <div className="flex flex-col gap-5">
-            <nav aria-label="Breadcrumb" className="hidden flex-wrap items-center gap-1 text-base leading-normal font-medium lg:flex">
-              <Link href={breadcrumbHref} className="text-muted-foreground transition-colors hover:text-ma-text">Course</Link>
-              <ChevronRight className="size-4 text-muted-foreground" aria-hidden />
+            <nav
+              aria-label="Breadcrumb"
+              className="hidden flex-wrap items-center gap-1 text-base leading-normal font-medium lg:flex"
+            >
+              <Link
+                href={breadcrumbHref}
+                className="text-muted-foreground transition-colors hover:text-ma-text"
+              >
+                Course
+              </Link>
+              <ChevronRight
+                className="size-4 text-muted-foreground"
+                aria-hidden
+              />
               <span className="text-ma-text">{course.title}</span>
             </nav>
 
             <div>
-              <h1 className="max-w-[510px] text-[28px] leading-normal font-bold text-ma-text lg:text-[40px]">{course.title}</h1>
-              <p className="mt-5 text-lg leading-normal text-ma-text">{course.instructorName ?? "Instructor"}</p>
+              <h1 className="max-w-[510px] text-[28px] leading-normal font-bold text-ma-text lg:text-[40px]">
+                {course.title}
+              </h1>
+              <p className="mt-5 text-lg leading-normal text-ma-text">
+                {course.instructorName ?? "Instructor"}
+              </p>
             </div>
           </div>
 
@@ -51,7 +79,10 @@ export function CourseDetailHeroSection({ course, breadcrumbHref = "/courses" }:
                 {course.enrollmentCount} Students Enrolled
               </span>
               <span className="inline-flex items-center gap-1 rounded-md border border-border p-[5px] text-sm leading-normal font-medium text-muted-foreground">
-                <Star className="size-5 fill-ma-star text-ma-star" aria-hidden />
+                <Star
+                  className="size-5 fill-ma-star text-ma-star"
+                  aria-hidden
+                />
                 {course.avgRating.toFixed(1)}
               </span>
               <span className="inline-flex items-center rounded-md border border-border px-[5px] py-1.5 text-sm leading-normal font-medium text-muted-foreground">
@@ -60,9 +91,13 @@ export function CourseDetailHeroSection({ course, breadcrumbHref = "/courses" }:
             </div>
 
             <div className="flex flex-wrap items-baseline gap-2.5 leading-normal font-medium">
-              <p className="text-2xl text-ma-text">$ {displayPrice.toFixed(2)} USD</p>
+              <p className="text-2xl text-ma-text">
+                $ {displayPrice.toFixed(2)} USD
+              </p>
               {course.discountedPrice && (
-                <p className="text-base text-muted-foreground line-through">$ {course.price.toFixed(2)} USD</p>
+                <p className="text-base text-muted-foreground line-through">
+                  $ {course.price.toFixed(2)} USD
+                </p>
               )}
             </div>
 
diff --git a/src/features/marketing/components/course-information-card.tsx b/src/features/marketing/components/course-information-card.tsx
index 75e4a79..6d07309 100644
--- a/src/features/marketing/components/course-information-card.tsx
+++ b/src/features/marketing/components/course-information-card.tsx
@@ -1,7 +1,10 @@
 import { Clock, Languages, Layers, PlayCircle } from "lucide-react"
 
 import { EnrollNowButton } from "@/features/courses/components/enroll-now-button"
-import { minutesToDuration, type DurationUnit } from "@/features/courses/lib/duration"
+import {
+  minutesToDuration,
+  type DurationUnit,
+} from "@/features/courses/lib/duration"
 
 type CourseContentData = {
   id: string
@@ -56,8 +59,6 @@ export function CourseInformationCard({
     { label: "Language:", value: languageDisplay, icon: Languages },
   ]
 
-  console.log(course)
-
   return (
     <aside className="w-full rounded-2xl border border-ma-border-light bg-white px-4 pt-4 pr-3.5 pb-[25px] lg:top-8">
       <h2 className="leading/[100%]-normal text-xl font-extrabold text-ma-text sm:text-2xl">
diff --git a/src/features/marketing/components/courses-hero-section.tsx b/src/features/marketing/components/courses-hero-section.tsx
index 9153fe1..ee6d9b2 100644
--- a/src/features/marketing/components/courses-hero-section.tsx
+++ b/src/features/marketing/components/courses-hero-section.tsx
@@ -16,30 +16,30 @@ export function CoursesHeroSection() {
   })
 
   return (
-    <section className="bg-white py-20 pb-20 text-ma-text sm:pt-25 sm:pb-25 lg:pt-18">
-      <div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
+    <section className="bg-white text-ma-text">
+      <div className="marketing-container">
         <div className="mx-auto max-w-200 text-center">
           <p className="text-base leading-normal font-medium tracking-[0.1em] text-muted-foreground uppercase">
-            Courses
+            Trainings
           </p>
 
           <h1 className="mt-7.5 font-sans text-[28px]/[100%] leading-[1.16] font-extrabold text-balance text-ma-text sm:text-[60px] sm:leading-[70px] lg:tracking-tight-xl">
             Build the Skills That Keep You Moving Forward
           </h1>
 
-          <p className="mt-5 text-base leading-normal text-ma-text lg:mt-10 lg:text-lg">
+          <p className="mt-5 text-base leading-normal text-ma-text sm:mt-10 sm:text-xl">
             Our AI training sessions are designed for people who are managing
             life&apos;s challenges and still showing up. No tech background
             required.
           </p>
         </div>
 
-        <div className="mt-10 grid justify-items-center gap-5 md:grid-cols-2 lg:mt-16 lg:grid-cols-3">
+        <div className="mt-10 grid gap-5 md:grid-cols-2 lg:mt-16 lg:grid-cols-3">
           {isLoading
             ? Array.from({ length: 3 }).map((_, i) => (
                 <div
                   key={i}
-                  className="flex w-full flex-col gap-5 sm:max-w-[334px]"
+                  className="flex w-full flex-col gap-5 sm:max-w-[400px]"
                 >
                   <Skeleton className="h-[254px] rounded-card-2" />
                   <div className="flex flex-col gap-2 px-2.5">
diff --git a/src/features/marketing/components/cta-section.tsx b/src/features/marketing/components/cta-section.tsx
index eebcc50..80ab406 100644
--- a/src/features/marketing/components/cta-section.tsx
+++ b/src/features/marketing/components/cta-section.tsx
@@ -4,8 +4,8 @@ import Link from "next/link"
 export function CtaSection() {
   return (
     <section>
-      <div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360">
-        <section className="relative mx-auto my-5 flex min-h-[450px] w-full flex-col items-center justify-center overflow-hidden rounded-card-2 bg-ma-text px-6 text-center lg:my-20">
+      <div className="marketing-container">
+        <section className="relative mx-auto my-5 flex min-h-[450px] w-full flex-col items-center justify-center overflow-hidden rounded-card-2 bg-ma-text px-6 text-center">
           <div className="mx-auto max-w-[650px]">
             <h2 className="mx-auto max-w-[600px] font-sans text-[28px]/[40px] font-extrabold tracking-[0%] text-white md:tracking-tight-xl lg:text-[40px]/[60px]">
               Help Someone Find Their Way Forward{" "}
diff --git a/src/features/marketing/components/donation-cta-section.tsx b/src/features/marketing/components/donation-cta-section.tsx
index 6b8a16f..c374e12 100644
--- a/src/features/marketing/components/donation-cta-section.tsx
+++ b/src/features/marketing/components/donation-cta-section.tsx
@@ -3,7 +3,7 @@ import Link from "next/link"
 
 export function DonationCtaSection() {
   return (
-    <section className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
+    <section className="marketing-container">
       <div className="relative mx-auto my-5 flex min-h-[450px] w-full flex-col items-center justify-center overflow-hidden rounded-card-2 bg-ma-text px-6 text-center lg:my-20">
         <div className="mx-auto">
           <h2 className="mx-auto font-sans text-[28px]/[40px] font-extrabold tracking-[0%] text-white md:tracking-tight-xl lg:text-[40px]/[60px]">
diff --git a/src/features/marketing/components/donation-form.tsx b/src/features/marketing/components/donation-form.tsx
index c5b0610..ac0a92a 100644
--- a/src/features/marketing/components/donation-form.tsx
+++ b/src/features/marketing/components/donation-form.tsx
@@ -1,137 +1,273 @@
-"use client"
-import { Button } from "@/shared/ui/button"
-import { Checkbox } from "@/shared/ui/checkbox"
-import { Field } from "@/shared/ui/field"
-import { Input } from "@/shared/ui/input"
-import { Label } from "@/shared/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/shared/ui/select"
-import { cn } from "@/shared/utils"
-import { ArrowRight } from "lucide-react"
-import React, { useState } from "react"
-
-const prices: { id: number; amount: number }[] = [
-  {
-    id: 1,
-    amount: 10,
-  },
-  {
-    id: 2,
-    amount: 20,
-  },
-  {
-    id: 3,
-    amount: 30,
-  },
-  {
-    id: 4,
-    amount: 40,
-  },
-]
-
-type DonationType = { label: string; value: string }
-const donationTypes = [
-  { label: "One time Donation", value: "one time" },
-  { label: "Monthly Donation", value: "monthly_donation" },
-  { label: "Fixed Donation", value: "fixed_donation" },
-]
-
-const DonationForm = () => {
-  const [selectedPrice, setSelectedPrice] = useState<null | number>(null)
-  const [selectedDonationType, setSelectedDonationType] =
-    useState<DonationType["value"]>("one_time")
-  return (
-    <div className="flex flex-col gap-7.5 rounded-xl bg-white px-4 py-10 sm:px-7.5">
-      <div>
-        <h1 className="mb-5 text-lg font-semibold sm:text-2xl">
-          Make a Donation
-        </h1>
-        <p className="text-base">
-          Help us bring hope. support, and real impact in communities
-        </p>
-      </div>
-
-      <div className="flex flex-col gap-7.5 border-b pb-7.5">
-        <div className="grid grid-cols-3 items-center gap-3 sm:grid-cols-5">
-          {prices.map((price) => (
-            <button
-              className={cn(
-                "rounded-md px-5 py-2.5 text-base font-medium",
-                selectedPrice === price.amount
-                  ? "bg-ma-admin-primary text-white"
-                  : "bg-ma-bg text-primary"
-              )}
-              key={price.id}
-            >
-              ${price.amount}
-            </button>
-          ))}
-
-          <Input
-            type="number"
-            name="custom-amount"
-            id="custom-amount"
-            className="col-span-2 h-auto appearance-none rounded-md border-none bg-ma-bg px-5 py-2.5 text-primary ring-0 placeholder:text-xs placeholder:text-muted-foreground sm:col-span-1 sm:w-full"
-            placeholder="Enter amount"
-            min={1}
-          />
-        </div>
-
-        <Field className="flex flex-col gap-2">
-          <Label>Frequency</Label>
-          <Select defaultValue={donationTypes[0].value}>
-            <SelectTrigger className="w-full rounded-md bg-ma-bg data-[size=default]:h-12">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent className="rounded-md">
-              <SelectGroup>
-                {donationTypes.map((item) => (
-                  <SelectItem
-                    className="px-4 py-2"
-                    key={item.value}
-                    value={item.value}
-                  >
-                    {item.label}
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </Field>
-
-        <Field orientation="horizontal">
-          <Checkbox
-            className="data-checked:border-ma-admin-primary data-checked:bg-ma-admin-primary"
-            id="authorize-checkbox"
-            name="authorize-checkbox"
-          />
-          <Label htmlFor="authorize-checkbox">
-            Authorize payment processing at the checkout page{" "}
-          </Label>
-        </Field>
-      </div>
-
-      <div className="flex items-center justify-between">
-        <span>3% Administration fee</span>
-        <span>$0.6</span>
-      </div>
-      <div className="flex items-center justify-between">
-        <span>Total </span>
-        <span>$300</span>
-      </div>
-
-      <Button className="h-[51px] rounded-[60px] bg-ma-admin-primary hover:bg-ma-admin-primary-dark">
-        Donate Now <ArrowRight />
-      </Button>
-    </div>
-  )
-}
-
-export default DonationForm
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { ArrowRight, LoaderCircle } from "lucide-react"
+import { useState } from "react"
+import { Controller, useForm, useWatch } from "react-hook-form"
+import { toast } from "sonner"
+import * as z from "zod"
+
+import { apiFetch } from "@/shared/lib/api-fetch"
+import { Button } from "@/shared/ui/button"
+import { Checkbox } from "@/shared/ui/checkbox"
+import { Field, FieldError, FieldGroup, FieldLabel } from "@/shared/ui/field"
+import { Input } from "@/shared/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/ui/select"
+import { cn } from "@/shared/utils"
+import { computeAdminFee, computeDonationTotal } from "@/features/marketing/lib/donation-pricing"
+
+const prices = [
+  { id: 1, amount: 10 },
+  { id: 2, amount: 20 },
+  { id: 3, amount: 30 },
+  { id: 4, amount: 40 },
+]
+
+const donationTypeOptions = [
+  { label: "Fixed Donation", value: "fixed" },
+  { label: "Tier Donation", value: "tier" },
+  { label: "Monthly Donation", value: "monthly" },
+] as const
+
+const donationFormSchema = z.object({
+  donationType: z.enum(["fixed", "tier", "monthly"]),
+  amount: z
+    .number({ message: "Enter a donation amount" })
+    .positive("Amount must be greater than 0"),
+  donorName: z.string().min(1, "Full name is required"),
+  donorEmail: z.email("Please enter a valid email address"),
+  confirmation: z.boolean(),
+})
+
+type DonationFormValues = z.infer<typeof donationFormSchema>
+
+const DonationForm = () => {
+  const [submitting, setSubmitting] = useState(false)
+  const form = useForm<DonationFormValues>({
+    resolver: zodResolver(donationFormSchema),
+    defaultValues: {
+      donationType: "fixed",
+      amount: prices[1].amount,
+      donorName: "",
+      donorEmail: "",
+      confirmation: false,
+    },
+  })
+
+  const watchedAmount = useWatch({ control: form.control, name: "amount" })
+  const isConfirmed = useWatch({ control: form.control, name: "confirmation" })
+
+  const fee = computeAdminFee(watchedAmount)
+  const total = computeDonationTotal(watchedAmount)
+
+  async function onSubmit(data: DonationFormValues) {
+    setSubmitting(true)
+    try {
+      const result = await apiFetch<{ url: string }>("/api/donations", {
+        method: "POST",
+        body: {
+          amount: data.amount,
+          donorName: data.donorName,
+          donorEmail: data.donorEmail,
+          donationType: data.donationType,
+        },
+      })
+
+      window.location.assign(result.url)
+    } catch (err) {
+      toast.error(
+        err instanceof Error
+          ? err.message
+          : "Something went wrong. Please try again."
+      )
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-7.5 bg-white px-4 py-10 shadow-[0_-6px_40px_0_rgba(0,0,0,0.08)] sm:px-7.5">
+      <div>
+        <h1 className="mb-5 text-lg font-semibold sm:text-2xl">
+          Make a Donation
+        </h1>
+        <p className="text-base">
+          Help us bring hope. support, and real impact in communities
+        </p>
+      </div>
+
+      <form
+        id="donation-form"
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col gap-7.5"
+      >
+        <FieldGroup className="gap-7.5">
+          <Controller
+            control={form.control}
+            name="amount"
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel htmlFor="donation-amount">
+                  Donation amount
+                </FieldLabel>
+                <div className="grid grid-cols-3 items-center gap-3 sm:grid-cols-5">
+                  {prices.map((price) => (
+                    <button
+                      type="button"
+                      key={price.id}
+                      onClick={() =>
+                        form.setValue("amount", price.amount, {
+                          shouldValidate: true,
+                        })
+                      }
+                      className={cn(
+                        "rounded-none px-5 py-2.5 text-base font-medium transition-colors",
+                        watchedAmount === price.amount
+                          ? "bg-ma-admin-primary text-white"
+                          : "bg-ma-bg text-primary"
+                      )}
+                    >
+                      ${price.amount}
+                    </button>
+                  ))}
+
+                  <Input
+                    id="donation-amount"
+                    type="number"
+                    inputMode="numeric"
+                    min={1}
+                    value={field.value === 0 ? "" : field.value}
+                    onChange={(e) =>
+                      field.onChange(
+                        e.target.value === "" ? 0 : Number(e.target.value)
+                      )
+                    }
+                    className="col-span-2 h-auto rounded-none border-none bg-ma-bg px-5 py-2.5 text-primary ring-0 [-moz-appearance:textfield] placeholder:text-xs placeholder:text-muted-foreground focus-visible:ring-2 sm:col-span-1 sm:w-full"
+                    placeholder="Enter amount"
+                  />
+                </div>
+                <FieldError errors={[fieldState.error]} />
+              </Field>
+            )}
+          />
+
+          <Controller
+            control={form.control}
+            name="donationType"
+            render={({ field }) => (
+              <Field className="flex flex-col gap-2">
+                <FieldLabel>Frequency</FieldLabel>
+                <Select value={field.value} onValueChange={field.onChange}>
+                  <SelectTrigger className="w-full rounded-none bg-ma-bg data-[size=default]:h-12">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent className="rounded-none">
+                    <SelectGroup>
+                      {donationTypeOptions.map((item) => (
+                        <SelectItem
+                          className="px-4 py-2"
+                          key={item.value}
+                          value={item.value}
+                        >
+                          {item.label}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </Field>
+            )}
+          />
+
+          <Controller
+            control={form.control}
+            name="donorName"
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel htmlFor="donor-name">Full name</FieldLabel>
+                <Input
+                  {...field}
+                  id="donor-name"
+                  autoComplete="name"
+                  placeholder="Your full name"
+                  className="h-11 rounded-none bg-ma-bg px-5 text-base placeholder:text-muted-foreground"
+                />
+                <FieldError errors={[fieldState.error]} />
+              </Field>
+            )}
+          />
+
+          <Controller
+            control={form.control}
+            name="donorEmail"
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel htmlFor="donor-email">Email address</FieldLabel>
+                <Input
+                  {...field}
+                  id="donor-email"
+                  type="email"
+                  autoComplete="email"
+                  placeholder="you@example.com"
+                  className="h-11 rounded-none bg-ma-bg px-5 text-base placeholder:text-muted-foreground"
+                />
+                <FieldError errors={[fieldState.error]} />
+              </Field>
+            )}
+          />
+
+          <Controller
+            control={form.control}
+            name="confirmation"
+            render={({ field }) => (
+              <Field orientation="horizontal">
+                <Checkbox
+                  id="donation-confirmation"
+                  checked={field.value}
+                  onCheckedChange={(checked) =>
+                    field.onChange(checked === true)
+                  }
+                  className="data-checked:border-ma-admin-primary data-checked:bg-ma-admin-primary"
+                />
+                <FieldLabel htmlFor="donation-confirmation" className="w-fit">
+                  Authorize payment processing at the checkout page
+                </FieldLabel>
+              </Field>
+            )}
+          />
+        </FieldGroup>
+      </form>
+
+      <div className="flex flex-col gap-7.5 border-t pt-7.5">
+        <div className="flex items-center justify-between">
+          <span>3% Administration fee</span>
+          <span>${fee.toFixed(2)}</span>
+        </div>
+        <div className="flex items-center justify-between">
+          <span>Total</span>
+          <span>${total.toFixed(2)}</span>
+        </div>
+      </div>
+
+      <Button
+        type="submit"
+        form="donation-form"
+        disabled={!isConfirmed || submitting}
+        className="h-[51px] rounded-[60px] bg-ma-admin-primary hover:bg-ma-admin-primary-dark"
+      >
+        {submitting && (
+          <LoaderCircle className="size-4 animate-spin" aria-hidden="true" />
+        )}
+        Donate Now <ArrowRight />
+      </Button>
+    </div>
+  )
+}
+
+export default DonationForm
diff --git a/src/features/marketing/components/donation-hero-section.tsx b/src/features/marketing/components/donation-hero-section.tsx
index c252243..b5236e6 100644
--- a/src/features/marketing/components/donation-hero-section.tsx
+++ b/src/features/marketing/components/donation-hero-section.tsx
@@ -2,8 +2,8 @@ import Image from "next/image"
 
 export function DonationHeroSection() {
   return (
-    <section id="donation" className="bg-white py-12.5 text-ma-text lg:py-25">
-      <div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
+    <section id="donation" className="bg-white text-ma-text">
+      <div className="marketing-container">
         <div className="mx-auto max-w-[800px] text-center">
           <p className="text-base leading-normal font-medium tracking-[10%] text-muted-foreground uppercase">
             Donation
@@ -25,12 +25,12 @@ export function DonationHeroSection() {
             src="/figma-home/melanie-and-will.png"
             alt="Melanie Reyes, founder of ModernAdvocates Inc."
             priority
-            className="rounded-card-2 object-cover sm:h-full"
+            className="w-full rounded-card-2 object-cover sm:h-full sm:w-auto"
             width={510}
             height={560}
           />
 
-          <article className="flex flex-col rounded-card-2 bg-ma-surface-2 px-4 py-7.5 lg:min-h-[550px] lg:p-7">
+          <article className="flex flex-col rounded-card-2 bg-ma-surface-2 p-5 lg:min-h-[550px]">
             <div>
               <h2 className="text-3xl leading-normal font-semibold text-ma-text sm:text-4xl">
                 Melanie And Will
diff --git a/src/features/marketing/components/donation-support-section.tsx b/src/features/marketing/components/donation-support-section.tsx
index f7bde26..540cd11 100644
--- a/src/features/marketing/components/donation-support-section.tsx
+++ b/src/features/marketing/components/donation-support-section.tsx
@@ -1,86 +1,9 @@
-"use client"
-
-import { ArrowRight, LoaderCircle } from "lucide-react"
-import { useState } from "react"
-import { Controller, useForm } from "react-hook-form"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { toast } from "sonner"
-import * as z from "zod"
-
-import { Field, FieldError, FieldLabel } from "@/shared/ui/field"
-import { MarketingButton } from "@/shared/ui/marketing-button"
-import { Input } from "@/shared/ui/input"
-import { apiFetch } from "@/shared/lib/api-fetch"
 import DonationForm from "./donation-form"
 
-const donationTypes = [
-  "Fixed Donation",
-  "Tier Donation",
-  "Monthly Pay",
-] as const
-const donationAmounts = [100, 200, 1000]
-
-const donationFormSchema = z.object({
-  donationType: z.enum(donationTypes),
-  amount: z.number().positive("Amount must be greater than 0"),
-  donorName: z.string().min(1, "Full name is required"),
-  donorEmail: z.email("Please enter a valid email address"),
-  confirmation: z.boolean().refine((val) => val === true, {
-    message: "You must confirm the donation to proceed",
-  }),
-})
-
-const donationTypeMap: Record<string, string> = {
-  "Fixed Donation": "fixed",
-  "Tier Donation": "tier",
-  "Monthly Pay": "monthly",
-}
-
 export function DonationSupportSection() {
-  const [submitting, setSubmitting] = useState(false)
-  const form = useForm<z.infer<typeof donationFormSchema>>({
-    resolver: zodResolver(donationFormSchema),
-    defaultValues: {
-      donationType: "Fixed Donation",
-      amount: 0,
-      donorName: "",
-      donorEmail: "",
-      confirmation: false,
-    },
-  })
-
-  const watchedDonationType = form.watch("donationType")
-  const showAmountSelector =
-    watchedDonationType === "Tier Donation" ||
-    watchedDonationType === "Monthly Pay"
-
-  async function onSubmit(data: z.infer<typeof donationFormSchema>) {
-    setSubmitting(true)
-    try {
-      const result = await apiFetch<{ url: string }>("/api/donations", {
-        method: "POST",
-        body: {
-          amount: data.amount,
-          donorName: data.donorName,
-          donorEmail: data.donorEmail,
-          donationType: donationTypeMap[data.donationType] ?? "fixed",
-        },
-      })
-
-      window.location.href = result.url
-    } catch (err) {
-      toast.error(
-        err instanceof Error
-          ? err.message
-          : "Something went wrong. Please try again."
-      )
-      setSubmitting(false)
-    }
-  }
-
   return (
-    <section className="bg-[#ECE8FF] py-12.5 text-ma-text lg:py-25">
-      <div className="mx-auto grid items-center gap-12 px-4 lg:max-w-7xl lg:grid-cols-2 lg:gap-6 lg:px-25 2xl:max-w-360 2xl:px-50">
+    <section className="bg-[#ECE8FF] text-ma-text">
+      <div className="marketing-container grid items-center gap-12 lg:grid-cols-2 lg:gap-6">
         <div className="pt-0 lg:pt-2">
           <h2 className="font-sans text-3xl leading-[1.12] font-extrabold text-balance text-primary sm:text-5xl sm:tracking-tight-xl">
             Invest in Hope
diff --git a/src/features/marketing/components/empowerment-section.tsx b/src/features/marketing/components/empowerment-section.tsx
index 8eaca03..153f9e6 100644
--- a/src/features/marketing/components/empowerment-section.tsx
+++ b/src/features/marketing/components/empowerment-section.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from "react"
 export function EmpowermentSection() {
   return (
     <section id="about" className="bg-white">
-      <div className="mx-auto px-4 py-12.5 sm:py-25 lg:max-w-7xl lg:px-25 2xl:max-w-360">
+      <div className="marketing-container">
         <header className="mx-auto mb-10 text-center text-3xl font-bold sm:mb-20 sm:max-w-[508px] lg:text-5xl">
           <h1 className="text-center">Empowering People to Move Forward</h1>
         </header>
diff --git a/src/features/marketing/components/faq.tsx b/src/features/marketing/components/faq.tsx
index b0f50f8..f0ff8e7 100644
--- a/src/features/marketing/components/faq.tsx
+++ b/src/features/marketing/components/faq.tsx
@@ -44,8 +44,8 @@ export function Faq() {
   }
 
   return (
-    <section id="faq" className="bg-white py-12.5 lg:py-25">
-      <div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360">
+    <section id="faq" className="bg-white">
+      <div className="marketing-container">
         <div className="grid gap-12 lg:grid-cols-[425px_1fr] lg:gap-[77px]">
           <div>
             <h2 className="max-w-[425px] font-sans text-[28px]/[100%] font-extrabold text-primary lg:text-[40px]/[60px] lg:tracking-tight-xl">
diff --git a/src/features/marketing/components/footer.tsx b/src/features/marketing/components/footer.tsx
index 639ac6c..935dab0 100644
--- a/src/features/marketing/components/footer.tsx
+++ b/src/features/marketing/components/footer.tsx
@@ -12,8 +12,8 @@ const quickLinks = [
 export function Footer() {
   return (
     <footer className="overflow-hidden bg-white text-ma-text">
-      <div className="relative mx-auto min-h-125 px-4 pt-12.5 lg:max-w-7xl lg:px-25 lg:pt-17.5 2xl:max-w-360">
-        <div className="grid gap-10 md:grid-cols-[0.9fr_0.6fr_1.5fr] lg:gap-10 xl:grid-cols-[254px_180px_1fr] xl:justify-between xl:gap-[140px] 2xl:gap-50">
+      <div className="marketing-container relative min-h-125 pt-12.5 lg:pt-17.5">
+        <div className="grid w-full justify-between gap-10 md:grid-cols-[0.9fr_0.6fr_1.5fr] lg:gap-10 xl:grid-cols-[254px_180px_388px] xl:justify-between xl:gap-[140px]">
           <section className="">
             <h2 className="font-sans text-lg font-extrabold lg:text-2xl">
               Get in Touch
@@ -59,11 +59,11 @@ export function Footer() {
             </ul>
           </nav>
 
-          <section>
+          <section className="">
             <h2 className="font-sans text-lg font-extrabold lg:text-2xl">
               Join our News letter
             </h2>
-            <p className="mt-5 text-sm leading-normal xl:max-w-[387px]">
+            <p className="mt-5 text-base leading-normal xl:max-w-[387px]">
               Stay connected and informed: Join our newsletter for the latest
               updates, inspiration, and design insights.
             </p>
diff --git a/src/features/marketing/components/how-can-we-help.tsx b/src/features/marketing/components/how-can-we-help.tsx
index 090eafc..3d917dd 100644
--- a/src/features/marketing/components/how-can-we-help.tsx
+++ b/src/features/marketing/components/how-can-we-help.tsx
@@ -27,8 +27,8 @@ const cardsData = [
 
 const HowCanWeHelpSection = () => {
   return (
-    <section className="bg-ma-bg py-12.5 text-ma-text lg:py-25">
-      <div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360">
+    <section className="bg-ma-bg text-ma-text">
+      <div className="marketing-container">
         <header className="mx-auto mb-7.5 text-center text-3xl font-bold text-primary sm:text-5xl">
           <h1>How Can We Help</h1>
         </header>
diff --git a/src/features/marketing/components/how-can-we-support.tsx b/src/features/marketing/components/how-can-we-support.tsx
index de4f249..bcb30a4 100644
--- a/src/features/marketing/components/how-can-we-support.tsx
+++ b/src/features/marketing/components/how-can-we-support.tsx
@@ -6,8 +6,8 @@ import React from "react"
 
 const SupportSection = () => {
   return (
-    <section id="about" className="bg-white py-12.5 sm:py-25">
-      <div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
+    <section id="about" className="bg-white">
+      <div className="marketing-container">
         <div className="mx-auto text-center">
           <h2 className="mx-auto max-w-160 text-center font-sans text-[26px]/[100%] font-extrabold tracking-[0%] text-ma-text sm:text-[40px]/[60px]">
             How can we support your healthcare journey?{" "}
diff --git a/src/features/marketing/components/invest-in-hope-section.tsx b/src/features/marketing/components/invest-in-hope-section.tsx
index 71551f7..cb22022 100644
--- a/src/features/marketing/components/invest-in-hope-section.tsx
+++ b/src/features/marketing/components/invest-in-hope-section.tsx
@@ -3,8 +3,8 @@ import DonationForm from "./donation-form"
 
 const InvestInHopeSection = () => {
   return (
-    <section className="bg-[#ECE8FF] py-12.5 text-ma-text sm:py-25">
-      <div className="mx-auto grid items-center gap-10 px-4 sm:grid-cols-2 sm:gap-25 lg:max-w-7xl lg:px-25 2xl:max-w-360">
+    <section className="bg-[#ECE8FF] text-ma-text">
+      <div className="marketing-container grid items-center gap-10 sm:grid-cols-2 sm:gap-25">
         <div>
           <h1 className="mb-7.5 text-4xl font-bold sm:text-[3.5rem]">
             Invest in Hope
diff --git a/src/features/marketing/components/mission-sections.tsx b/src/features/marketing/components/mission-sections.tsx
index 947e5c2..5140d3a 100644
--- a/src/features/marketing/components/mission-sections.tsx
+++ b/src/features/marketing/components/mission-sections.tsx
@@ -28,7 +28,7 @@ export function MissionBridgeSection() {
 
   return (
     <section id="about" className="bg-white">
-      <div className="mx-auto px-4 py-12.5 sm:py-25 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
+      <div className="marketing-container">
         <div className="mx-auto max-w-xl text-center">
           <h2 className="font-sans text-[28px]/[100%] font-extrabold tracking-[0%] text-ma-text sm:text-[40px]/[60px] sm:tracking-[-0.01em]">
             Bridging the Gap between Technology and Care
@@ -193,7 +193,7 @@ export function MissionBridgeSection() {
 export function FounderStorySection() {
   return (
     <section className="bg-white">
-      <div className="mx-auto px-4 py-12.5 lg:max-w-7xl lg:px-25 lg:py-25 2xl:max-w-360 2xl:px-50">
+      <div className="marketing-container">
         {/* Large screens */}
         <div className="hidden gap-10 lg:grid lg:grid-cols-[0.8fr_1.2fr] lg:items-center">
           <Image
diff --git a/src/features/marketing/components/our-vision-section.tsx b/src/features/marketing/components/our-vision-section.tsx
index a8a20c5..0e86209 100644
--- a/src/features/marketing/components/our-vision-section.tsx
+++ b/src/features/marketing/components/our-vision-section.tsx
@@ -3,7 +3,7 @@ import Image from "next/image"
 const OurVisionSection = () => {
   return (
     <section className="bg-[#111827]">
-      <div className="mx-auto flex flex-col items-center gap-20 px-4 py-12.5 text-white sm:gap-50 sm:py-25 lg:max-w-7xl lg:px-25 2xl:max-w-360">
+      <div className="marketing-container flex flex-col items-center gap-20 text-white sm:gap-50">
         <div className="mx-auto self-center">
           <h1 className="mx-auto mb-4 max-w-[850px] text-center text-3xl font-bold sm:mb-7.5 lg:text-[3.5rem]">
             Everyone deserves the opportunity to move forward{" "}
diff --git a/src/features/marketing/components/practical-pathways-section.tsx b/src/features/marketing/components/practical-pathways-section.tsx
index e723ff9..7a32a69 100644
--- a/src/features/marketing/components/practical-pathways-section.tsx
+++ b/src/features/marketing/components/practical-pathways-section.tsx
@@ -3,7 +3,7 @@ import Image from "next/image"
 const PracticalPathwaysSection = () => {
   return (
     <section className="bg-[#111827]">
-      <div className="mx-auto flex flex-col items-center gap-20 px-4 py-12.5 text-white sm:gap-50 sm:py-25 lg:max-w-7xl lg:px-25 2xl:max-w-360">
+      <div className="marketing-container flex flex-col items-center gap-20 text-white sm:gap-50">
         <div className="mx-auto self-center">
           <h1 className="mx-auto mb-4 max-w-[850px] text-center text-3xl font-bold sm:mb-7.5 lg:text-[3.5rem]">
             Practical pathways to improved health outcomes
diff --git a/src/features/marketing/components/stories-from-our-community-section.tsx b/src/features/marketing/components/stories-from-our-community-section.tsx
index 5243043..52f11c5 100644
--- a/src/features/marketing/components/stories-from-our-community-section.tsx
+++ b/src/features/marketing/components/stories-from-our-community-section.tsx
@@ -71,8 +71,8 @@ export const StoriesSection = () => {
   }
 
   return (
-    <section className="bg-white py-12.5 text-ma-text sm:py-25">
-      <div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360">
+    <section className="bg-white text-ma-text">
+      <div className="marketing-container">
         <header className="mx-auto max-w-[774px] text-center">
           <h2 className="text-[32px]/[1.1] font-bold text-primary lg:text-[3.5rem]">
             Stories from our community
diff --git a/src/features/marketing/components/testimonials.tsx b/src/features/marketing/components/testimonials.tsx
index fcc4652..d26064a 100644
--- a/src/features/marketing/components/testimonials.tsx
+++ b/src/features/marketing/components/testimonials.tsx
@@ -59,8 +59,8 @@ export function Testimonials() {
   }
 
   return (
-    <section className="bg-white py-12.5 lg:py-25">
-      <div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
+    <section className="bg-white">
+      <div className="marketing-container">
         <div className="flex w-full flex-col gap-8 sm:flex-row sm:items-end sm:justify-between">
           <div>
             <h2 className="font-sans text-[28px]/[100%] font-extrabold text-primary lg:text-[40px] lg:leading-15">
diff --git a/src/features/marketing/lib/donation-pricing.ts b/src/features/marketing/lib/donation-pricing.ts
new file mode 100644
index 0000000..a311322
--- /dev/null
+++ b/src/features/marketing/lib/donation-pricing.ts
@@ -0,0 +1,9 @@
+export const ADMIN_FEE_RATE = 0.03
+
+export function computeAdminFee(amount: number) {
+  return Math.round(amount * ADMIN_FEE_RATE * 100) / 100
+}
+
+export function computeDonationTotal(amount: number) {
+  return Math.round((amount + computeAdminFee(amount)) * 100) / 100
+}
\ No newline at end of file
diff --git a/src/features/user-dashboard/components/course-player-navbar.tsx b/src/features/user-dashboard/components/course-player-navbar.tsx
index a7ff301..5b5bd27 100644
--- a/src/features/user-dashboard/components/course-player-navbar.tsx
+++ b/src/features/user-dashboard/components/course-player-navbar.tsx
@@ -21,7 +21,9 @@ export default function CoursePlayerNavbar() {
   const { data: enrollment } = useQuery({
     queryKey: queryKeys.enrollment.progress(courseId),
     queryFn: () =>
-      apiFetch<{ id: string; progress: number }>(`/api/enrollments/by-course/${courseId}`),
+      apiFetch<{ id: string; progress: number }>(
+        `/api/enrollments/by-course/${courseId}`
+      ),
     enabled: !!courseId,
   })
 
@@ -34,7 +36,7 @@ export default function CoursePlayerNavbar() {
 
   return (
     <header className="bg-white">
-      <div className="relative z-20 mx-auto px-4 py-5 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
+      <div className="marketing-container relative z-20 px-4 py-5!">
         <div className="flex w-full items-center justify-between">
           <div className="flex items-center gap-4 md:hidden">
             <ProfileDropdown
@@ -51,7 +53,10 @@ export default function CoursePlayerNavbar() {
               Leave review
             </button>
           </div>
-          <Link href="/dashboard" className="hidden w-[157px] flex-col gap-1 md:flex">
+          <Link
+            href="/dashboard"
+            className="hidden w-[157px] flex-col gap-1 md:flex"
+          >
             <Image
               src="/figma-home/logo.svg"
               alt="ModernAdvocates Inc."
diff --git a/src/features/user-dashboard/components/dashboard-navbar.tsx b/src/features/user-dashboard/components/dashboard-navbar.tsx
index ddcb6c3..259bbc8 100644
--- a/src/features/user-dashboard/components/dashboard-navbar.tsx
+++ b/src/features/user-dashboard/components/dashboard-navbar.tsx
@@ -19,7 +19,7 @@ export default function DashboardNavbar() {
 
   return (
     <header className="bg-white">
-      <div className="relative z-20 mx-auto px-4 py-5 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
+      <div className="marketing-container relative z-20 mx-auto py-5!">
         <div className="flex w-full items-center justify-between">
           <div className="flex items-center gap-3 md:hidden">
             <ProfileDropdown
@@ -29,7 +29,10 @@ export default function DashboardNavbar() {
               alignOffset={8}
             />
           </div>
-          <Link href="/dashboard" className="hidden w-[157px] flex-col gap-1 md:flex">
+          <Link
+            href="/dashboard"
+            className="hidden w-[157px] flex-col gap-1 md:flex"
+          >
             <Image
               src="/figma-home/logo.svg"
               alt="ModernAdvocates Inc."
diff --git a/src/shared/lib/api-handler.ts b/src/shared/lib/api-handler.ts
index 97ccea2..04e82a0 100644
--- a/src/shared/lib/api-handler.ts
+++ b/src/shared/lib/api-handler.ts
@@ -39,6 +39,7 @@ export function apiHandler<P extends ApiRouteContext>(
           { status: error.status }
         )
       }
+      console.error(error)
       Sentry.captureException(error)
       return NextResponse.json(
         { error: "Internal server error" },
diff --git a/src/shared/ui/marketing-button.tsx b/src/shared/ui/marketing-button.tsx
index 0f0b892..855e16a 100644
--- a/src/shared/ui/marketing-button.tsx
+++ b/src/shared/ui/marketing-button.tsx
@@ -18,7 +18,7 @@ export function MarketingButton({
       className={cn(
         "group relative h-pill overflow-hidden rounded-pill px-5 py-4 text-base font-semibold disabled:opacity-60",
         tone === "solid"
-          ? "bg-ma-text text-white"
+          ? "text-white"
           : "border-ma-text/20 bg-white text-ma-text",
         className
       )}
@@ -30,4 +30,4 @@ export function MarketingButton({
       <div className="pointer-events-none absolute inset-0 rounded-pill bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
     </Button>
   )
-}
\ No newline at end of file
+}
diff --git a/src/shared/ui/marketing-container.tsx b/src/shared/ui/marketing-container.tsx
index 81e14b2..5a34674 100644
--- a/src/shared/ui/marketing-container.tsx
+++ b/src/shared/ui/marketing-container.tsx
@@ -8,10 +8,7 @@ export function MarketingContainer({
   return (
     <div
       data-slot="marketing-container"
-      className={cn(
-        "mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360",
-        className
-      )}
+      className={cn("marketing-container", className)}
       {...props}
     />
   )