diff --git a/apps/frontend/project.json b/apps/frontend/project.json
index a732b97..40241a1 100644
--- a/apps/frontend/project.json
+++ b/apps/frontend/project.json
@@ -10,7 +10,7 @@
       "defaultConfiguration": "production",
       "options": {
         "outputPath": "dist/apps/frontend",
-        "configFile": "apps/frontend/vite.config.ts"
+        "configFile": "apps/frontend/vite.config.mts"
       },
       "configurations": {
         "development": {
diff --git a/apps/frontend/src/containers/donations/DonationForm.tsx b/apps/frontend/src/containers/donations/DonationForm.tsx
index 3bf6427..a8631e1 100644
--- a/apps/frontend/src/containers/donations/DonationForm.tsx
+++ b/apps/frontend/src/containers/donations/DonationForm.tsx
@@ -4,6 +4,7 @@ import apiClient, {
 } from '../../api/apiClient';
 import React, { useState, FormEvent } from 'react';
 import './donations.css';
+import { DonationSummary } from './DonationSummary';
 
 type RecurringInterval = 'weekly' | 'bimonthly' | 'monthly' | 'quarterly';
 
@@ -377,6 +378,7 @@ export const DonationForm: React.FC<DonationFormProps> = ({
           Show dedication message publicly
         </label>
       </div>
+      <DonationSummary baseAmount={10} />
 
       <button type="submit" className="submit-button" disabled={isSubmitting}>
         {isSubmitting ? 'Processing...' : 'Submit Donation'}
diff --git a/apps/frontend/src/containers/donations/DonationSummary.spec.tsx b/apps/frontend/src/containers/donations/DonationSummary.spec.tsx
new file mode 100644
index 0000000..f7ca76c
--- /dev/null
+++ b/apps/frontend/src/containers/donations/DonationSummary.spec.tsx
@@ -0,0 +1,93 @@
+/** @vitest-environment jsdom */
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { DonationSummary } from './DonationSummary';
+import { DONATION_FEE_RATE, DONATION_FIXED_FEE } from './DonationSummary';
+
+describe('DonationSummary Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  // unit tests for fee calculation
+
+  // fee calculation with default values
+  it('calculates the fee with default values', () => {
+    const baseAmount = Math.random() * 10;
+    const feeTotal = (
+      (baseAmount * DONATION_FEE_RATE) / 100 +
+      DONATION_FIXED_FEE
+    ).toFixed(2);
+    render(<DonationSummary baseAmount={baseAmount} />);
+    expect(
+      screen.queryByText(
+        new RegExp(
+          `Add \\$${feeTotal} to cover transaction fees and tip the fundraising platform to help keep it`,
+        ),
+      ),
+    ).not.toBeNull();
+  });
+
+  // fee calculation with custom values
+  it('calculates the fee with default values', () => {
+    const baseAmount = Math.random() * 10;
+    const feeRate = Math.random() * 10;
+    const fixedFee = Math.random() * 10;
+    const feeTotal = ((baseAmount * feeRate) / 100 + fixedFee).toFixed(2);
+    render(
+      <DonationSummary
+        baseAmount={baseAmount}
+        feeRate={feeRate}
+        fixedFee={fixedFee}
+      />,
+    );
+    expect(
+      screen.queryByText(
+        new RegExp(
+          `Add \\$${feeTotal} to cover transaction fees and tip the fundraising platform to help keep it`,
+        ),
+      ),
+    ).not.toBeNull();
+  });
+
+  // donation total calculation does not include fee when initially rendered
+  it('calculates total donation amount without fee when initially rendered', async () => {
+    const baseAmount = Math.random() * 10;
+
+    // initial rendering does not include fee in total donation calculation
+    render(<DonationSummary baseAmount={baseAmount} />);
+    expect(
+      screen.queryByText(new RegExp(`\\$${baseAmount.toFixed(2)}`)),
+    ).not.toBeNull();
+  });
+
+  // donation total calculation includes fee when toggle activated
+  it('calculates total donation amount with fee when toggle activated', async () => {
+    const baseAmount = Math.random() * 10;
+    const feeTotal =
+      (baseAmount * DONATION_FEE_RATE) / 100 + DONATION_FIXED_FEE;
+    render(<DonationSummary baseAmount={baseAmount} />);
+
+    // activate fee toggle
+    const feeToggle = screen.getAllByTestId('fee-toggle');
+    fireEvent.click(feeToggle[0]);
+
+    // donation total calculation should include fee
+    expect(
+      screen.queryByText(
+        new RegExp(`\\$${(baseAmount + feeTotal).toFixed(2)}`),
+      ),
+    ).not.toBeNull();
+
+    fireEvent.click(feeToggle[0]);
+
+    // donation total calculation should not include fee
+    expect(
+      screen.queryByText(new RegExp(`\\$${baseAmount.toFixed(2)}`)),
+    ).not.toBeNull();
+  });
+});
diff --git a/apps/frontend/src/containers/donations/DonationSummary.tsx b/apps/frontend/src/containers/donations/DonationSummary.tsx
new file mode 100644
index 0000000..09e0df1
--- /dev/null
+++ b/apps/frontend/src/containers/donations/DonationSummary.tsx
@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import './donations.css';
+
+interface DonationSummaryData {
+  baseAmount: number;
+  feeRate?: number;
+  fixedFee?: number;
+}
+
+export const DONATION_FEE_RATE = 2.9;
+export const DONATION_FIXED_FEE = 0.3;
+
+export const DonationSummary: React.FC<DonationSummaryData> = ({
+  baseAmount,
+  feeRate,
+  fixedFee,
+}) => {
+  const [feeApplied, setFeeApplied] = useState<boolean>(false);
+  const [amount, setAmount] = useState<number>(baseAmount);
+
+  const rate = feeRate ?? DONATION_FEE_RATE;
+  const fee = fixedFee ?? DONATION_FIXED_FEE;
+  const feeTotal = (baseAmount * rate) / 100 + fee;
+
+  return (
+    <div className="donation-summary">
+      <div style={{ fontSize: '1rem' }}>
+        <b>Total:</b> ${amount.toFixed(2)}
+      </div>
+      <div
+        data-testid="fee-toggle"
+        className="toggle-container"
+        onClick={() => {
+          if (feeApplied) {
+            setAmount(baseAmount);
+          }
+          // fee is applied
+          else {
+            setAmount(baseAmount + feeTotal);
+          }
+          setFeeApplied(!feeApplied);
+        }}
+      >
+        <div className={`toggle-slider ${feeApplied ? 'on' : 'off'}`}>
+          <div className="toggle-circle"></div>
+        </div>
+        <span className="toggle-label">
+          Add ${feeTotal.toFixed(2)} to cover transaction fees and tip the
+          fundraising platform to help keep it{' '}
+          <a
+            style={{ color: 'black' }}
+            target="_blank"
+            href="https://www.givelively.org/free#what-it-means"
+            rel="noreferrer"
+          >
+            free for nonprofits.
+          </a>
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/containers/donations/donations.css b/apps/frontend/src/containers/donations/donations.css
index be45fcf..ec6c78e 100644
--- a/apps/frontend/src/containers/donations/donations.css
+++ b/apps/frontend/src/containers/donations/donations.css
@@ -89,3 +89,71 @@
 .required {
   color: #d93025;
 }
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  cursor: pointer;
+  user-select: none;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.toggle-slider {
+  position: relative;
+  flex-shrink: 0;
+  width: 30px;
+  height: 18px;
+  background-color: #ccc;
+  border-radius: 9999px;
+  transition:
+    background-color 0.3s ease,
+    transform 0.3s ease;
+  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+}
+
+.toggle-slider.on {
+  background-color: #2a7a73;
+}
+
+.toggle-circle {
+  position: absolute;
+  top: 50%;
+  left: 4px;
+  width: 40%;
+  height: 70%;
+  background-color: white;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  transition:
+    left 0.3s ease,
+    transform 0.3s ease;
+}
+
+.toggle-slider.on .toggle-circle {
+  left: 55%;
+}
+
+.toggle-label {
+  font-size: 0.8rem;
+  color: #333;
+  line-height: 1.4;
+  text-align: left;
+  max-width: 320px;
+}
+
+.donation-summary {
+  font-size: 14px;
+  margin: 0 auto;
+  font-family: sans-serif;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  text-align: center;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 0.75rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
diff --git a/apps/frontend/src/containers/root.tsx b/apps/frontend/src/containers/root.tsx
index 05c220d..1f62113 100644
--- a/apps/frontend/src/containers/root.tsx
+++ b/apps/frontend/src/containers/root.tsx
@@ -1,5 +1,19 @@
+import { DonationSummary } from '@containers/donations/DonationSummary';
+import { DonationForm } from './donations/DonationForm';
+
 const Root: React.FC = () => {
-  return <>Welcome to scaffolding!</>;
+  return (
+    <>
+      <DonationForm
+        onSuccess={function (donationId: string): void {
+          throw new Error('Function not implemented.');
+        }}
+        onError={function (error: Error): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    </>
+  );
 };
 
 export default Root;
diff --git a/apps/frontend/vite.config.ts b/apps/frontend/vite.config.mts
similarity index 100%
rename from apps/frontend/vite.config.ts
rename to apps/frontend/vite.config.mts
diff --git a/package.json b/package.json
index 2589e88..08f0e9b 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "@nx/react": "22.0.2",
     "@nx/vite": "22.0.2",
     "@nx/webpack": "22.0.2",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "16.1.0",
     "@types/jest": "30.0.0",
     "@types/node": "^20.19.0",
diff --git a/yarn.lock b/yarn.lock
index 7014637..ef76d7c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -500,7 +500,7 @@
   dependencies:
     tslib "^2.3.1"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.27.1":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.27.1":
   version "7.27.1"
   resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz"
   integrity sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==
@@ -4186,6 +4186,20 @@
   dependencies:
     tslib "^2.8.0"
 
+"@testing-library/dom@^10.4.1":
+  version "10.4.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.1.tgz#d444f8a889e9a46e9a3b4f3b88e0fcb3efb6cf95"
+  integrity sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^5.0.1"
+    aria-query "5.3.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.5.0"
+    picocolors "1.1.1"
+    pretty-format "^27.0.2"
+
 "@testing-library/react@16.1.0":
   version "16.1.0"
   resolved "https://registry.npmjs.org/@testing-library/react/-/react-16.1.0.tgz"
@@ -4237,6 +4251,11 @@
   dependencies:
     tslib "^2.4.0"
 
+"@types/aria-query@^5.0.1":
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708"
+  integrity sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==
+
 "@types/babel__core@^7.20.5":
   version "7.20.5"
   resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz"
@@ -5274,6 +5293,13 @@ argparse@^2.0.1:
   resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-query@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
+  integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
+  dependencies:
+    dequal "^2.0.3"
+
 aria-query@^5.3.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz"
@@ -6940,6 +6966,11 @@ depd@~1.1.2:
   resolved "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz"
   integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
 
+dequal@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
 destroy@1.2.0, destroy@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz"
@@ -7006,6 +7037,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-accessibility-api@^0.5.9:
+  version "0.5.16"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
+  integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
+
 dom-serializer@^1.0.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz"
@@ -10827,6 +10863,11 @@ luxon@^3.2.1:
   resolved "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz"
   integrity sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==
 
+lz-string@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
+  integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
+
 macos-release@^2.5.0:
   version "2.5.1"
   resolved "https://registry.npmjs.org/macos-release/-/macos-release-2.5.1.tgz"
@@ -11889,7 +11930,7 @@ pgpass@1.0.5:
   dependencies:
     split2 "^4.1.0"
 
-picocolors@^1.0.0, picocolors@^1.1.0, picocolors@^1.1.1:
+picocolors@1.1.1, picocolors@^1.0.0, picocolors@^1.1.0, picocolors@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
@@ -12513,6 +12554,15 @@ pretty-format@30.2.0, pretty-format@^30.0.0:
     ansi-styles "^5.2.0"
     react-is "^18.3.1"
 
+pretty-format@^27.0.2:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 pretty-format@^29.7.0:
   version "29.7.0"
   resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz"
@@ -12683,6 +12733,11 @@ react-is@^16.13.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^17.0.1:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
 react-is@^18.0.0, react-is@^18.3.1:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"