diff --git a/apps/portal/src/components/Frame.styles.js b/apps/portal/src/components/Frame.styles.js
index 5bd5f39e68..6bba1a2842 100644
--- a/apps/portal/src/components/Frame.styles.js
+++ b/apps/portal/src/components/Frame.styles.js
@@ -20,6 +20,8 @@ import {FeedbackPageStyles} from './pages/FeedbackPage';
 import EmailSuppressedPage from './pages/EmailSuppressedPage.css';
 import EmailSuppressionFAQ from './pages/EmailSuppressionFAQ.css';
 import EmailReceivingFAQ from './pages/EmailReceivingFAQ.css';
+import {TipsAndDonationsSuccessStyle} from './pages/SupportSuccess';
+import {TipsAndDonationsErrorStyle} from './pages/SupportError';
 
 // Global styles
 const FrameStyles = `
@@ -1223,6 +1225,8 @@ export function getFrameStyles({site}) {
         FeedbackPageStyles +
         EmailSuppressedPage +
         EmailSuppressionFAQ +
-        EmailReceivingFAQ;
+        EmailReceivingFAQ +
+        TipsAndDonationsSuccessStyle +
+        TipsAndDonationsErrorStyle;
     return FrameStyle;
 }
diff --git a/apps/portal/src/components/pages/SupportError.js b/apps/portal/src/components/pages/SupportError.js
index 0038587aab..92bcb4ae2e 100644
--- a/apps/portal/src/components/pages/SupportError.js
+++ b/apps/portal/src/components/pages/SupportError.js
@@ -1,11 +1,58 @@
+import {useContext} from 'react';
+import AppContext from '../../AppContext';
+import CloseButton from '../common/CloseButton';
+import ActionButton from '../common/ActionButton';
+import {ReactComponent as WarningIcon} from '../../images/icons/warning-outline.svg';
+
+export const TipsAndDonationsErrorStyle = `
+    .gh-portal-tips-and-donations .gh-tips-and-donations-icon-error {
+        padding: 10px 0;
+        text-align: center;
+        width: 48px;
+        margin: 0 auto;
+        color: #f50b23;
+    }
+
+    .gh-portal-tips-donations .gh-tips-donations-icon.gh-feedback-icon-error {
+        color: #f50b23;
+        width: 96px;
+    }
+
+    .gh-portal-tips-and-donations .gh-portal-text-center {
+        padding: 16px 32px 12px;
+    }
+`;
+
 const SupportError = ({error}) => {
+    const errorTitle = 'Sorry, that didn’t work.';
     const errorMessage = error || 'There was an error processing your payment. Please try again.';
+    const buttonLabel = 'Retry';
+    const {brandColor} = useContext(AppContext);
 
     return (
-        <div>
-            {errorMessage}
+        <div className='gh-portal-content gh-portal-tips-and-donations'>
+            <CloseButton />
+
+            <div className="gh-tips-and-donations-icon-error">
+                <WarningIcon />
+            </div>
+            <h1 className="gh-portal-main-title">{errorTitle}</h1>
+            <p className="gh-portal-text-center">{errorMessage}</p>
+            <ActionButton
+                style={{width: '100%'}}
+                retry={true}
+                // onClick = {() => onAction('closePopup')}
+                disabled={false}
+                brandColor={brandColor}
+                // brandColor='#000000'
+                label={buttonLabel}
+                isDestructive={true}
+                isRunning={false}
+                tabindex='3'
+                classes={'sticky bottom'}
+            />
         </div>
     );
 };
 
-export default SupportError;
+export default SupportError;
\ No newline at end of file
diff --git a/apps/portal/src/components/pages/SupportSuccess.js b/apps/portal/src/components/pages/SupportSuccess.js
index a056853b01..1a55f930e7 100644
--- a/apps/portal/src/components/pages/SupportSuccess.js
+++ b/apps/portal/src/components/pages/SupportSuccess.js
@@ -1,8 +1,50 @@
+import {useContext} from 'react';
+import AppContext from '../../AppContext';
+import {ReactComponent as ConfettiIcon} from '../../images/icons/confetti.svg';
+import CloseButton from '../common/CloseButton';
+import ActionButton from '../common/ActionButton';
+
+export const TipsAndDonationsSuccessStyle = `
+    .gh-portal-tips-and-donations .gh-tips-and-donations-icon-success {
+        padding: 10px 0;
+        text-align: center;
+        color: var(--brandcolor);
+        width: 48px;
+        margin: 0 auto;
+    }
+
+    .gh-portal-tips-and-donations .gh-portal-text-center {
+        padding: 16px 32px 12px;
+    }
+`;
+
 const SupportSuccess = () => {
-    const message = 'Thank you for your support!';
+    const {onAction, brandColor} = useContext(AppContext);
+    const successTitle = 'Thank you!';
+    const successDescription = 'Your support means a lot.';
+    const buttonLabel = 'Close';
 
     return (
-        <div>{message}</div>
+        <div className='gh-portal-content gh-portal-tips-and-donations'>
+            <CloseButton />
+
+            <div className="gh-tips-and-donations-icon-success">
+                <ConfettiIcon />
+            </div>
+            <h1 className="gh-portal-main-title">{successTitle}</h1>
+            <p className="gh-portal-text-center">{successDescription}</p>
+            <ActionButton
+                style={{width: '100%'}}
+                retry={false}
+                onClick = {() => onAction('closePopup')}
+                disabled={false}
+                brandColor={brandColor}
+                label={buttonLabel}
+                isRunning={false}
+                tabindex='3'
+                classes={'sticky bottom'}
+            />
+        </div>
     );
 };
 
diff --git a/apps/portal/src/images/icons/confetti.svg b/apps/portal/src/images/icons/confetti.svg
new file mode 100644
index 0000000000..2488743010
--- /dev/null
+++ b/apps/portal/src/images/icons/confetti.svg
@@ -0,0 +1,10 @@
+<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <title>confetti</title>
+  <defs>
+    <style>
+      .cls-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
+    </style>
+  </defs>
+  <ellipse class="cls-1" cx="11.531" cy="12.469" rx="2.625" ry="5.25" transform="rotate(-45 11.531 12.47)"/>
+  <path class="cls-1" d="M7.4 9.7.888 21.121a1.5 1.5 0 0 0 1.991 1.991L14.3 16.605M15.773 7.7a.375.375 0 0 1 0 .531m-.53-.531a.375.375 0 0 1 .53 0m-.53.527a.377.377 0 0 1 0-.531m.53.531a.375.375 0 0 1-.53 0m4.773-4.773a.374.374 0 0 1 0 .53m-.53-.53a.374.374 0 0 1 .53 0m-.53.53a.374.374 0 0 1 0-.53m.53.53a.375.375 0 0 1-.53 0m.53 10.076a.375.375 0 0 1 0 .531m-.53-.531a.375.375 0 0 1 .53 0m-.53.531a.375.375 0 0 1 0-.531m.53.531a.375.375 0 0 1-.53 0M8.349 4.514a.377.377 0 0 1 0 .531m-.53-.531a.375.375 0 0 1 .53 0m-.53.531a.375.375 0 0 1 0-.531m.53.531a.375.375 0 0 1-.53 0M12.857.75a13.836 13.836 0 0 1-.531 5.62m4.243-4.242-.53 2.651m7.211 6.364a13.836 13.836 0 0 0-5.62.531m4.242-4.243-2.651.53"/>
+</svg>
\ No newline at end of file
diff --git a/apps/portal/src/images/icons/warning-outline.svg b/apps/portal/src/images/icons/warning-outline.svg
new file mode 100644
index 0000000000..412a5d22c2
--- /dev/null
+++ b/apps/portal/src/images/icons/warning-outline.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <title>warning-stroke</title>
+  <path d="M13.313 2.275a1.5 1.5 0 0 0-2.626 0l-9.75 18A1.5 1.5 0 0 0 2.25 22.5h19.5a1.5 1.5 0 0 0 1.313-2.225zM12 18a.375.375 0 0 1 .375.375m-.75 0A.375.375 0 0 1 12 18m0 .75a.375.375 0 0 1-.375-.375m.75 0a.375.375 0 0 1-.375.375M12 15V8.25" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px"/>
+</svg>
\ No newline at end of file