From db5bc0ec32a1b72a4a30ea2ee8f3fc688f314d3f Mon Sep 17 00:00:00 2001
From: Jayden Carvajal <carvajal.ja@northeastern.edu>
Date: Sun, 1 Feb 2026 12:04:26 -0500
Subject: [PATCH 1/3] step1 component migrated

---
 apps/frontend/src/components/ui/checkbox.tsx  |  32 ++++
 apps/frontend/src/components/ui/input.tsx     |  19 +++
 apps/frontend/src/components/ui/label.tsx     |  20 +++
 apps/frontend/src/components/ui/textarea.tsx  |  15 ++
 .../donations/steps/Step1Amount.tsx           | 141 +++++++++++-------
 5 files changed, 174 insertions(+), 53 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/checkbox.tsx
 create mode 100644 apps/frontend/src/components/ui/input.tsx
 create mode 100644 apps/frontend/src/components/ui/label.tsx
 create mode 100644 apps/frontend/src/components/ui/textarea.tsx

diff --git a/apps/frontend/src/components/ui/checkbox.tsx b/apps/frontend/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..a622636
--- /dev/null
+++ b/apps/frontend/src/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import * as React from 'react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+
+import { cn } from '@lib/utils';
+import { CheckIcon } from 'lucide-react';
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+      >
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };
diff --git a/apps/frontend/src/components/ui/input.tsx b/apps/frontend/src/components/ui/input.tsx
new file mode 100644
index 0000000..c393544
--- /dev/null
+++ b/apps/frontend/src/components/ui/input.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { cn } from '@lib/utils';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/apps/frontend/src/components/ui/label.tsx b/apps/frontend/src/components/ui/label.tsx
new file mode 100644
index 0000000..46400a4
--- /dev/null
+++ b/apps/frontend/src/components/ui/label.tsx
@@ -0,0 +1,20 @@
+'use client';
+import * as React from 'react';
+import { Label as LabelPrimitive } from 'radix-ui';
+import { cn } from '@lib/utils';
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export { Label };
diff --git a/apps/frontend/src/components/ui/textarea.tsx b/apps/frontend/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..1d52d22
--- /dev/null
+++ b/apps/frontend/src/components/ui/textarea.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { cn } from '@lib/utils';
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export { Textarea };
diff --git a/apps/frontend/src/containers/donations/steps/Step1Amount.tsx b/apps/frontend/src/containers/donations/steps/Step1Amount.tsx
index dc14f2c..0904386 100644
--- a/apps/frontend/src/containers/donations/steps/Step1Amount.tsx
+++ b/apps/frontend/src/containers/donations/steps/Step1Amount.tsx
@@ -1,4 +1,10 @@
 import React from 'react';
+import { Label } from '@components/ui/label';
+import { Button } from '@components/ui/button';
+import { Input } from '@components/ui/input';
+import { Textarea } from '@components/ui/textarea';
+import { Checkbox } from '@components/ui/checkbox';
+
 import type {
   DonationFormData,
   FormErrors,
@@ -101,55 +107,66 @@ export const Step1Amount: React.FC<Step1AmountProps> = ({
     formData.dedicationKind === kind;
 
   return (
-    <div className="step1-container">
-      <div className="form-group">
-        <label className="step1-label">Donation Recurrence</label>
-        <div className="recurrence-options">
+    <div className="w-full h-4/5 flex flex-col items-start justify-start gap-[4%]">
+      <div className="flex flex-col">
+        <Label className="text-xl text-[#57585c] font-thin">
+          Donation Recurrence
+        </Label>
+        <div className="flex gap-2">
           {DONATION_RECURRENCE_OPTIONS.map((option) => (
-            <button
+            <Button
               key={option.label}
               type="button"
               className={
-                'recurrence-option' +
-                (isRecurrenceSelected(option) ? ' selected' : '')
+                'py-1 px-2 whitespace-nowrap rounded border border-gray-300 bg-white text-base cursor-pointer transition-colors duration-150 ease-in-out font-thin disabled:opacity-60 disabled:cursor-not-allowed' +
+                (isRecurrenceSelected(option)
+                  ? 'border-[#2a7a73] bg-[#e0f2f1] font-semibold'
+                  : 'bg-white border-gray-300')
               }
               onClick={() => handleRecurrenceClick(option)}
               disabled={isSubmitting}
             >
               {option.label}
-            </button>
+            </Button>
           ))}
         </div>
         {errors.recurringInterval && (
-          <span className="error-message">{errors.recurringInterval}</span>
+          <span className="mt-[2%] text-sm text-[#d93025]">
+            {errors.recurringInterval}
+          </span>
         )}
       </div>
-      <div className="form-group">
-        <label className="step1-label" htmlFor="amount">
-          Donation Amount <span className="required">*</span>
-        </label>
+      <div className="flex flex-col">
+        <Label className="text-lg text-[#57585c] font-thin" htmlFor="amount">
+          Donation Amount <span className="text-[#d93025]">*</span>
+        </Label>
 
-        <div className="amount-grid">
+        <div className="flex flex-wrap gap-4 mb-[0.5rem]">
           {DONATION_PRESET_AMOUNTS.map((amount) => (
-            <button
+            <Button
               key={amount}
               type="button"
               className={
-                'amount-button' + (isAmountSelected(amount) ? ' selected' : '')
+                'flex-[1_1_20%] py-1 px-2 w-full rounded border border-gray-300 bg-white text-base font-thin cursor-pointer transition-colors duration-150 ease-in-out disabled:opacity-60 disabled:cursor-not-allowed' +
+                (isAmountSelected(amount)
+                  ? ' border-[#2a7a73] bg-[#e0f2f1] font-semibold'
+                  : '')
               }
               onClick={() => handlePresetAmountClick(amount)}
               disabled={isSubmitting}
             >
               ${amount}
-            </button>
+            </Button>
           ))}
         </div>
 
-        <div className="amount-custom-row">
-          <div className="amount-custom-label">Custom Amount</div>
-          <div className="amount-custom-input">
-            <div className="amount-currency-prefix">$</div>
-            <input
+        <div className="flex flex-row items-center justify-start gap-[4%] w-full">
+          <div className="text-base font-semibold whitespace-nowrap">
+            Custom Amount
+          </div>
+          <div className="text-base font-semibold whitespace-nowrap">
+            <span className="text-base text-[#555]">$</span>
+            <Input
               type="text"
               id="amount"
               name="amount"
@@ -158,26 +175,28 @@ export const Step1Amount: React.FC<Step1AmountProps> = ({
               placeholder="0.00"
               value={formData.amount}
               onChange={onChange}
-              className={errors.amount ? 'error' : ''}
+              className={errors.amount ? 'border-[#d93025] bg-[#fff6f6]' : ''}
               disabled={isSubmitting}
               aria-invalid={!!errors.amount}
               aria-describedby={errors.amount ? 'amount-error' : undefined}
             />
-            <span className="amount-currency-suffix">USD</span>
+            <span className="text-base text-[#555]">USD</span>
           </div>
         </div>
 
         {errors.amount && (
-          <span id="amount-error" className="error-message">
+          <span id="amount-error" className="mt-2 text-sm text-[#d93025]">
             {errors.amount}
           </span>
         )}
       </div>
 
-      <div className="form-group">
-        <label className="step1-label">Donation Anonymity</label>
+      <div className="flex flex-col">
+        <Label className="text-lg text-[#57585c] font-thin">
+          Donation Anonymity
+        </Label>
         <div
-          className="toggle-container toggle-no-padding"
+          className="gap-[4%] flex items-start cursor-pointer select-none flex-wrap justify-start p-0"
           role="switch"
           aria-checked={formData.isAnonymous}
           onClick={() =>
@@ -189,20 +208,24 @@ export const Step1Amount: React.FC<Step1AmountProps> = ({
           }
         >
           <div
-            className={'toggle-slider ' + (formData.isAnonymous ? 'on' : 'off')}
+            className={`relative flex-shrink-0 w-10 min-w-[12px] aspect-[2/1] rounded-full transition-all duration-300 ease-in-out shadow-[inset_0_0_3px_rgba(0,0,0,0.2)] ${formData.isAnonymous ? 'bg-[#2a7a73]' : 'bg-gray-300'}`}
           >
-            <div className="toggle-circle" />
+            <div
+              className={`absolute top-1/2 w-[40%] h-[70%] bg-white rounded-full -translate-y-1/2 transition-all duration-300 ease-in-out ${formData.isAnonymous ? 'left-[50%]' : 'left-[10%]'}`}
+            />
           </div>
-          <span className="toggle-label">
+          <span className="text-base text-[#333] text-left w-4/5">
             Display name as anonymous when publicly shown
           </span>
         </div>
       </div>
 
-      <div className="form-group">
-        <div className="step1-label">Dedicate This Donation</div>
+      <div className="flex flex-col">
+        <div className="text-lg text-[#57585c] font-thin">
+          Dedicate This Donation
+        </div>
         <div
-          className="toggle-no-padding toggle-container"
+          className="gap-[4%] flex items-start cursor-pointer select-none flex-wrap justify-start p-0"
           role="switch"
           aria-checked={!!formData.isDedicated}
           onClick={() =>
@@ -214,42 +237,48 @@ export const Step1Amount: React.FC<Step1AmountProps> = ({
           }
         >
           <div
-            className={'toggle-slider ' + (formData.isDedicated ? 'on' : 'off')}
+            className={`relative flex-shrink-0 w-10 min-w-[12px] aspect-[2/1] rounded-full transition-all duration-300 ease-in-out shadow-[inset_0_0_3px_rgba(0,0,0,0.2)] ${formData.isDedicated ? 'bg-[#2a7a73]' : 'bg-gray-300'}`}
           >
-            <div className="toggle-circle" />
+            <div
+              className={`absolute top-1/2 w-[40%] h-[70%] bg-white rounded-full -translate-y-1/2 transition-all duration-300 ease-in-out ${formData.isDedicated ? 'left-[50%]' : 'left-[10%]'}`}
+            />{' '}
           </div>
         </div>
       </div>
 
       {formData.isDedicated && (
         <>
-          <div className="recurrence-options">
-            <button
+          <div className="flex gap-2">
+            <Button
               type="button"
               className={
-                'recurrence-option' +
-                (isDedicationKindSelected('honor') ? ' selected' : '')
+                'py-1 px-2 w-full whitespace-nowrap rounded border text-base cursor-pointer transition-colors duration-150 ease-in-out disabled:opacity-60 disabled:cursor-not-allowed' +
+                (isDedicationKindSelected('honor')
+                  ? ' border-[#2a7a73] bg-[#e0f2f1] font-semibold'
+                  : ' border-gray-300 bg-white')
               }
               onClick={() => handleDedicationKindClick('honor')}
               disabled={isSubmitting}
             >
               In Honor Of
-            </button>
-            <button
+            </Button>
+            <Button
               type="button"
               className={
-                'recurrence-option' +
-                (isDedicationKindSelected('memory') ? ' selected' : '')
+                'py-1 px-2 w-full whitespace-nowrap rounded border text-base cursor-pointer transition-colors duration-150 ease-in-out disabled:opacity-60 disabled:cursor-not-allowed' +
+                (isDedicationKindSelected('memory')
+                  ? ' border-[#2a7a73] bg-[#e0f2f1] font-semibold'
+                  : ' border-gray-300 bg-white')
               }
               onClick={() => handleDedicationKindClick('memory')}
               disabled={isSubmitting}
             >
               In Memory Of
-            </button>
+            </Button>
           </div>
 
-          <div className="dedication-message">
-            <textarea
+          <div className="w-full h-[12%]">
+            <Textarea
               id="dedicationMessage"
               name="dedicationMessage"
               value={formData.dedicationMessage}
@@ -260,17 +289,23 @@ export const Step1Amount: React.FC<Step1AmountProps> = ({
             />
           </div>
 
-          <div className="checkbox-group">
-            <label>
-              <input
-                type="checkbox"
+          <div className="w-full flex-row flex items-center justify-start text-[#57585c] font-thin h-[6%] overflow-hidden text-base gap-2">
+            <Label>
+              <Checkbox
+                id="showDedicationPublicly"
                 name="showDedicationPublicly"
                 checked={formData.showDedicationPublicly}
-                onChange={onChange}
+                onCheckedChange={(checked) =>
+                  triggerCheckboxToggle(
+                    onChange,
+                    'showDedicationPublicly',
+                    !!checked,
+                  )
+                }
                 disabled={isSubmitting}
               />
               Show dedication message publicly
-            </label>
+            </Label>
           </div>
         </>
       )}

From 1533d65c4bc16544d22023b501fe91d977339bf3 Mon Sep 17 00:00:00 2001
From: Jayden Carvajal <carvajal.ja@northeastern.edu>
Date: Sun, 1 Feb 2026 23:08:09 -0500
Subject: [PATCH 2/3] finished step3 component

---
 apps/frontend/src/components/ui/card.tsx      | 103 ++++++++++++++++++
 .../donations/steps/Step3Confirm.tsx          |  50 +++++----
 apps/frontend/src/styles.css                  |   2 +
 3 files changed, 133 insertions(+), 22 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/card.tsx

diff --git a/apps/frontend/src/components/ui/card.tsx b/apps/frontend/src/components/ui/card.tsx
new file mode 100644
index 0000000..28d883c
--- /dev/null
+++ b/apps/frontend/src/components/ui/card.tsx
@@ -0,0 +1,103 @@
+import * as React from 'react';
+
+import { cn } from '@lib/utils';
+
+function Card({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        'ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        'gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-4 group-data-[size=sm]/card:px-3', className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        'bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};
diff --git a/apps/frontend/src/containers/donations/steps/Step3Confirm.tsx b/apps/frontend/src/containers/donations/steps/Step3Confirm.tsx
index 1d88218..5aa34fa 100644
--- a/apps/frontend/src/containers/donations/steps/Step3Confirm.tsx
+++ b/apps/frontend/src/containers/donations/steps/Step3Confirm.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import type { DonationFormData } from '../donation-form.types';
+import { Card } from '@components/ui/card';
 
 interface Step3ConfirmProps {
   formData: DonationFormData;
@@ -9,44 +10,49 @@ export const Step3Confirm: React.FC<Step3ConfirmProps> = ({ formData }) => {
   const amount = parseFloat(formData.amount) || 0;
 
   return (
-    <section>
-      <h3>Step 3: Review your donation</h3>
-      <div className="summary-card">
-        <dl>
-          <div>
-            <dt>Amount</dt>
-            <dd>${amount.toFixed(2)}</dd>
-          </div>
-          <div>
-            <dt>Type</dt>
-            <dd>
-              {formData.donationType === 'one_time'
-                ? 'One-time'
-                : `Recurring (${formData.recurringInterval})`}
-            </dd>
-          </div>
-          <div>
+    <section className="font-['Source_Sans_3']">
+      <h1 className="font-semibold text-2xl">Confirm Payment</h1>
+      <h3 className="text-[#55565A] font-light">
+        Please confirm your information before preceeeding.
+      </h3>
+      <Card className="p-5 mt-4 mb-4 bg-[#EFEFEF] rounded-none shadow-none ring-0">
+        <h2 className="self-start text-s font-bold">Transaction Details</h2>
+        <dl className="flex flex-col justify-between gap-4 ">
+          <div className="flex justify-between">
             <dt>Donor</dt>
             <dd>
               {formData.firstName} {formData.lastName}
             </dd>
           </div>
-          <div>
+          <div className="flex justify-between">
             <dt>Email</dt>
             <dd>{formData.email}</dd>
           </div>
-          <div>
+          <div className="flex justify-between">
             <dt>Anonymous?</dt>
             <dd>{formData.isAnonymous ? 'Yes' : 'No'}</dd>
           </div>
-          {formData.dedicationMessage && (
+          <hr className="h-[1px] bg-black border-none" />
+          <div className="flex justify-between">
+            <dt>Recurrence</dt>
+            <dd>
+              {formData.donationType === 'one_time'
+                ? 'One-time'
+                : `Recurring (${formData.recurringInterval})`}
+            </dd>
+          </div>
+          <div className="flex justify-between font-bold">
+            <dt>Donation Amount</dt>
+            <dd>${amount.toFixed(2)}</dd>
+          </div>
+          {/* {formData.dedicationMessage && (
             <div>
               <dt>Dedication</dt>
               <dd>{formData.dedicationMessage}</dd>
             </div>
-          )}
+          )} */}
         </dl>
-      </div>
+      </Card>
     </section>
   );
 };
diff --git a/apps/frontend/src/styles.css b/apps/frontend/src/styles.css
index b5c61c9..040e0fd 100644
--- a/apps/frontend/src/styles.css
+++ b/apps/frontend/src/styles.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

From d737cbe50a248828dd348efaa39be3b46e1ec982 Mon Sep 17 00:00:00 2001
From: Jayden Carvajal <carvajal.ja@northeastern.edu>
Date: Sun, 1 Feb 2026 23:18:37 -0500
Subject: [PATCH 3/3] forgot to add the font to step 1

---
 apps/frontend/src/containers/donations/steps/Step1Amount.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/containers/donations/steps/Step1Amount.tsx b/apps/frontend/src/containers/donations/steps/Step1Amount.tsx
index 0904386..846909b 100644
--- a/apps/frontend/src/containers/donations/steps/Step1Amount.tsx
+++ b/apps/frontend/src/containers/donations/steps/Step1Amount.tsx
@@ -107,7 +107,7 @@ export const Step1Amount: React.FC<Step1AmountProps> = ({
     formData.dedicationKind === kind;
 
   return (
-    <div className="w-full h-4/5 flex flex-col items-start justify-start gap-[4%]">
+    <div className="w-full h-4/5 flex flex-col items-start justify-start gap-[4%] font-['Source_Sans_3']">
       <div className="flex flex-col">
         <Label className="text-xl text-[#57585c] font-thin">
           Donation Recurrence