diff --git a/public/static/locales/en/common.json b/public/static/locales/en/common.json
index d40ee960e1..57ffe13edc 100644
--- a/public/static/locales/en/common.json
+++ b/public/static/locales/en/common.json
@@ -42,5 +42,6 @@
   "verifyEmailHeader":"Please confirm your email.",
   "verifyEmailText":"To secure your account, we need to verify your email. Please check your inbox or spam/junk folder for a confirmation email and then continue to login.",
   "verifyEmailInfo":"If you didn’t receive an email please try logging in again and we’ll send you another email.",
-  "continueToLogin":"Continue to Login"
+  "continueToLogin":"Continue to Login",
+  "plantedBy":"Planted by"
 }
\ No newline at end of file
diff --git a/public/static/locales/en/redeem.json b/public/static/locales/en/redeem.json
new file mode 100644
index 0000000000..fd2c437589
--- /dev/null
+++ b/public/static/locales/en/redeem.json
@@ -0,0 +1,8 @@
+{
+    "myPlantedTreesByOrg": "My {{count}} tree will be planted by {{tpoName}}",
+    "myPlantedTreesByOrg_plural": "My {{count}} trees will be planted by {{tpoName}}",
+    "congratulations":"Congratulations!",
+    "addToMyTrees":"Add to my trees",
+    "validateCode":"Validate Code",
+    "enterRedeemCode": "Please enter a code to redeem"
+}
\ No newline at end of file
diff --git a/src/features/user/UserProfile/components/RedeemModal.tsx b/src/features/user/UserProfile/components/RedeemModal.tsx
index 3cc9481b00..68bb294437 100644
--- a/src/features/user/UserProfile/components/RedeemModal.tsx
+++ b/src/features/user/UserProfile/components/RedeemModal.tsx
@@ -5,14 +5,130 @@ import Backdrop from '@material-ui/core/Backdrop';
 import Fade from '@material-ui/core/Fade';
 import MaterialTextField from '../../../common/InputTypes/MaterialTextField';
 import i18next from '../../../../../i18n';
+import { postAuthenticatedRequest } from '../../../../utils/apiRequests/api';
+import { useForm } from 'react-hook-form';
+import { useAuth0 } from '@auth0/auth0-react';
+import Close from '../../../../../public/assets/images/icons/headerIcons/close';
+import ShareOptions from '../../../donations/components/ShareOptions';
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
+import tenantConfig from '../../../../../tenant.config';
 
 
-const {useTranslation} = i18next;
+const { useTranslation } = i18next;
 export default function RedeemModal({
   redeemModalOpen,
   handleRedeemModalClose,
 }: any) {
-  const {t} = useTranslation(['me', 'common'])
+  const { t } = useTranslation(['me', 'common', 'donate','redeem']);
+
+  const config = tenantConfig();
+
+  const {
+    isLoading,
+    isAuthenticated,
+    getAccessTokenSilently
+  } = useAuth0();
+
+  const imageRef = React.createRef();
+  const sendRef = () => imageRef;
+
+  const [errorMessage, setErrorMessage] = React.useState()
+  const [codeValidated, setCodeValidated] = React.useState(false)
+  const [isUploadingData, setIsUploadingData] = React.useState(false);
+  const [validCodeData, setValidCodeData] = React.useState();
+  const [codeRedeemed, setCodeRedeemed] = React.useState(false);
+  const [code, setCode] = React.useState();
+  const [textCopiedsnackbarOpen, setTextCopiedSnackbarOpen] = React.useState(
+    false,
+  );
+  const handleTextCopiedSnackbarOpen = () => {
+    setTextCopiedSnackbarOpen(true);
+  };
+
+  const handleTextCopiedSnackbarClose = (
+    event?: React.SyntheticEvent,
+    reason?: string,
+  ) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setTextCopiedSnackbarOpen(false);
+  };
+
+  function Alert(props: AlertProps) {
+    return <MuiAlert elevation={6} variant="filled" {...props} />;
+  }
+
+  const {
+    register,
+    handleSubmit,
+    errors,
+    getValues
+  } = useForm({ mode: 'onBlur' });
+
+  async function validateCode(data: any) {
+    setIsUploadingData(true)
+    const submitData = {
+      type: 'gift',
+      code: data.code
+    }
+    if (!isLoading && isAuthenticated) {
+      let token = await getAccessTokenSilently();
+      let userLang = localStorage.getItem('language') || 'en';
+      postAuthenticatedRequest(`/api/v1.3/${userLang}/validateCode`, submitData, token).then((res) => {
+        if (res.code === 401) {
+          setErrorMessage(res.message);
+          setIsUploadingData(false)
+        }
+        else if (res.status === 'error') {
+          setErrorMessage(res.errorText);
+          setIsUploadingData(false)
+        }
+        else if (res.status === 'success') {
+          setCode(data.code)
+          setCodeValidated(true);
+          setValidCodeData(res)
+          setIsUploadingData(false)
+        }
+      })
+    }
+  }
+
+  async function redeemCode() {
+    setIsUploadingData(true)
+    const submitData = {
+      type: 'gift',
+      code: code
+    }
+    if (!isLoading && isAuthenticated) {
+      let token = await getAccessTokenSilently();
+      let userLang = localStorage.getItem('language') || 'en';
+      postAuthenticatedRequest(`/api/v1.3/${userLang}/convertCode`, submitData, token).then((res) => {
+        console.log('Result', res);
+        if (res.code === 401) {
+          setErrorMessage(res.message);
+          setIsUploadingData(false)
+        }
+        else if (res.response.status === 'error') {
+          setErrorMessage(res.errorText);
+          setIsUploadingData(false)
+        }
+        else if (res.response.status === 'success') {
+          setCodeRedeemed(true);
+          setIsUploadingData(false);
+          setCodeValidated(false);
+        }
+      })
+    }
+  }
+
+  const closeRedeem = () => {
+    setCodeValidated(false);
+    setCodeRedeemed(false);
+    handleRedeemModalClose()
+  }
+
   return (
     <Modal
       className={styles.modalContainer}
@@ -27,15 +143,121 @@ export default function RedeemModal({
       }}
     >
       <Fade in={redeemModalOpen}>
-        <div className={styles.modal}>
-          <h4>
-            <b> {t('me:redeem')} </b>
-          </h4>
-          <div className={styles.inputField}>
-            <MaterialTextField placeholder="pp.eco/XADSA-DS-AS" label="" variant="outlined" />
-          </div>
-          <div className={styles.continueButton}>{t('common:continue')}</div>
-        </div>
+
+        {codeRedeemed && validCodeData ? (
+          <>
+            <div className={styles.modalFinal}>
+              <div className={styles.header}>
+                <div onClick={() => closeRedeem()} className={styles.headerCloseIcon}>
+                  <Close />
+                </div>
+                <div className={styles.headerTitle}>
+                  {t('redeem:congratulations')}
+                </div>
+              </div>
+
+              <div className={styles.thankyouImageContainer}>
+                <div className={styles.thankyouImage}>
+                  <div className={styles.thankyouImageHeader}>
+                    <p dangerouslySetInnerHTML={{ __html: t('donate:thankyouHeaderText') }} />
+                  </div>
+                  <div className={styles.donationCount}>
+                    {t('redeem:myPlantedTreesByOrg', { count: validCodeData.treeCount,tpoName:validCodeData.tpos[0].tpoName  })}
+                    <p className={styles.donationTenant}>
+                      {t('donate:plantTreesAtURL', { url: config.tenantURL })}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* hidden div for image download */}
+              <div style={{ width: '0px', height: '0px', overflow: 'hidden' }}>
+                <div className={styles.tempThankYouImage} ref={imageRef}>
+                  <div className={styles.tempthankyouImageHeader}>
+                    <p dangerouslySetInnerHTML={{ __html: t('donate:thankyouHeaderText') }} />
+                  </div>
+                  <p className={styles.tempDonationCount}>
+                    {t('redeem:myPlantedTreesByOrg', { count: validCodeData.treeCount,tpoName:validCodeData.tpos[0].tpoName  })}
+                  </p>
+                  <p className={styles.tempDonationTenant}>
+                    {t('donate:plantTreesAtURL', { url: config.tenantURL })}
+                  </p>
+                </div>
+              </div>
+
+              <div className={styles.shareOptions}>
+                <ShareOptions
+                  treeCount={validCodeData.treeCount}
+                  sendRef={sendRef}
+                  handleTextCopiedSnackbarOpen={handleTextCopiedSnackbarOpen}
+                />
+              </div>
+
+              <Snackbar
+                open={textCopiedsnackbarOpen}
+                autoHideDuration={4000}
+                onClose={handleTextCopiedSnackbarClose}
+              >
+                <Alert onClose={handleTextCopiedSnackbarClose} severity="success">
+                  {t('donate:copiedToClipboard')}
+                </Alert>
+              </Snackbar>
+
+            </div>
+          </>
+        ) : (
+            <div className={styles.modal}>
+              {codeValidated && validCodeData ? (
+                <>
+                  <div className={styles.codeTreeCount}>
+                    {validCodeData.treeCount}
+                    <span>{t('common:trees')}</span>
+                  </div>
+
+                  <div className={styles.plantedBy}>
+                    <span>{t('common:plantedBy')}</span>
+                    <p>{validCodeData.tpos[0].tpoName}</p>
+                  </div>
+
+                  <div onClick={handleSubmit(redeemCode)} className={styles.continueButton}>
+                    {isUploadingData ? (
+                      <div className={styles.spinner}></div>
+                    ) : (t('redeem:addToMyTrees'))}
+                  </div>
+                </>
+              ) : (
+                  <>
+                    <h4>
+                      {t('me:redeem')}
+                    </h4>
+
+                    <div className={styles.inputField}>
+                      <MaterialTextField inputRef={register({
+                        required: {
+                          value: true,
+                          message: t('redeem:enterRedeemCode'),
+                        }
+                      })} name={'code'} placeholder="XAD-1SA-5F1-A" label="" variant="outlined" />
+
+                    </div>
+                    {errors.code && (
+                      <span className={styles.formErrors}>{errors.code.message}</span>
+                    )}
+
+                    {errorMessage && (
+                      <span className={styles.formErrors}>{errorMessage}</span>
+                    )}
+                    <div onClick={handleSubmit(validateCode)} className={styles.continueButton}>
+                      {isUploadingData ? (
+                        <div className={styles.spinner}></div>
+                      ) : (t('redeem:validateCode'))}
+                    </div>
+                  </>
+                )}
+
+            </div>
+          )}
+
       </Fade>
     </Modal>
   );
diff --git a/src/features/user/UserProfile/styles/RedeemModal.module.scss b/src/features/user/UserProfile/styles/RedeemModal.module.scss
index 77f980a811..391ed95399 100644
--- a/src/features/user/UserProfile/styles/RedeemModal.module.scss
+++ b/src/features/user/UserProfile/styles/RedeemModal.module.scss
@@ -15,32 +15,337 @@
   border-radius: 8px;
   padding: 30px 56px;
   max-width: 80vw;
+  min-width: 320px;
   overflow: hidden;
   outline: none;
   display: flex;
   flex-direction: column;
   align-items: center;
+  >h4{
+    font-weight: bold;
+  }
 }
 
+.modalFinal{
+  background-color: #ffffff;
+  border: 0px;
+  border-radius: 8px;
+  padding: 20px;
+  max-width: 80vw;
+  min-width: 320px;
+  overflow: hidden;
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 
 .inputField {
     margin-top: 20px;
+    min-width: 208px;
 }
 
 .continueButton {
-  background-color: $light;
-  padding: 8px 40px;
-  border-radius: 24px;
+  height: 40px;
+  min-width: 208px;
+  border-radius: 100px;
+  margin-top: 40px;
+  padding-left: 30px;
+  padding-right: 30px;
+  display: flex;
+  justify-content: center;
+  background-image: linear-gradient(103deg, #68b030 5%, #007a49 116%);
+  align-items: center;
+  font-weight: bold;
+  color: white;
+  border: 0px;
+  transition-duration: 0.5s;
+  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.continueButton:hover {
+  transform: scale(1.05);
+  cursor: pointer;
+}
+
+// Loader for Buttons
+.spinner {
+  border: 2px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 2px solid transparent;
+  width: 16px !important;
+  height: 16px !important;
+  -webkit-animation: spin 1s linear infinite; /* Safari */
+  animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.formErrors{
+  font-family: $primaryFontFamily;
+  font-size: 14px;
+  color: #e74c3c;
+  margin-left: 6px;
+  margin-top: 6px;
+  max-width: 208px;
+  text-align: center;
+}
+
+.codeTreeCount{
+  font-size: 48px;
+  font-weight: bold;
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  align-items: baseline;
   color: $primaryColor;
-  border-color: $primaryColor;
-  border-width: 1px;
-  border-style: solid;
+  > span {
+    font-size: 20px;
+    margin-left: 6px;
+  }
+}
+
+.plantedBy{
+  color: $primaryFontColor;
+  text-align: center;
+  > span {
+    font-style: italic;
+  }
+  > p {
+    font-weight: bold;
+  }
+}
+
+
+.header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.headerCloseIcon {
+  height: 32px;
+  width: 32px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+.headerCloseIcon:hover {
+  cursor: pointer;
+}
+.headerTitle {
+  font-family: $primaryFontFamily;
+  font-weight: bold;
+  font-size: 27px;
+  color: $primaryFontColor;
+  margin-left: 10px;
+}
+
+
+.thankyouImageContainer {
+  display: flex;
+  justify-content: center;
+}
+.thankyouImage {
+  background-image: url('/tenants/planet/images/donations/donationCompletion.jpg');
+  background-position: center;
+  background-size: cover;
+  border-radius: 7px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  width: 280px;
+  height: 280px;
+  align-self: center;
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.tempThankYouImage {
+  background-image: url('/tenants/planet/images/donations/donationCompletion.jpg');
+  background-position: center;
+  background-size: cover;
+  width: 2300px;
+  height: 2300px;
+  align-self: center;
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+
+.tempDonationCount{
+  font-size: 130px;
+  font-weight: 600;
+  text-align: center;
+  position: absolute;
+  bottom: 300px;
+  padding: 0px 80px;
+  color: white;
+  font-variant-ligatures: none;
+}
+
+
+.tempDonationTenant{
+  font-size: 75px;
+  font-weight: 400;
+  font-style: italic;
+  text-align: center;
+  position: absolute;
+  bottom: 60px;
+  color: white;
+  font-variant-ligatures: none;
+}
+
+.donationCount {
+  font-size: 22px;
+  font-weight: 600;
+  text-align: center;
+  position: absolute;
+  bottom: 20px;
+  color: white;
+  font-variant-ligatures: none;
+}
+
+.donationTenant {
+  font-size: 13px;
+  font-weight: 400;
+  font-style: italic;
+  text-align: center;
+  margin-top: 16px;
+  color: white;
+  font-variant-ligatures: none;
+}
+
+.pfpLogo {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  height: 36px;
+  width: 36px;
+  background-color: white;
+  border-radius: 36px;
+  padding: 4px;
+}
+
+.shareRow {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  top: -30px;
+  width: fit-content;
+  left: 50%;
+  padding: 5px 10px;
+  border-radius: 30px;
+  transform: translate(-50%, 0%);
+  background-color: white;
+  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.12);
+  z-index: 2000;
+}
+
+.shareIcon {
+  padding: 4px 4px;
+  // background-color: blue;
+  border-radius: 30px;
+  margin: 0px 5px;
+}
+
+.buttonsContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  z-index: 10;
+  :hover {
+    cursor: pointer;
+  }
+}
+.downloadButton {
+  border-radius: 40px;
+  height: 48px;
+  padding: 12px 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  background-color: $primaryColor;
+  color: white;
   font-family: $primaryFontFamily;
-  font-size: $fontSubTitleSize;
   font-weight: 600;
-  margin-top: 30px;
+  :hover {
+    cursor: pointer;
+  }
 }
 
-.continueButton:hover{
-  cursor: pointer;
+
+@include smTabletView {
+
+.speedDialButton:focus {
+  outline: none;
+}
+  .container {
+    width: 412px;
+  }
+  .thankyouImage {
+    width: 372px;
+    height: 372px;
+  }
 }
+
+:export {
+  blueishGrey: '#f2f2f7';
+}
+
+.thankyouImageHeader {
+  font-size: 20px;
+  font-weight: 600;
+  text-align: center;
+  color: white;
+  font-variant-ligatures: none;
+  padding-top: 15%;
+  white-space: pre-line;
+}
+
+.thankyouImageHeader p h1{
+  font-size: 34px;
+  font-weight: bolder;
+}
+
+.tempthankyouImageHeader{
+  font-size: 100px;
+  font-weight: 600;
+  text-align: center;
+  width: 100%;
+  padding-top: 17%;
+  color: white;
+  font-variant-ligatures: none;
+  white-space: pre-line;
+}
+
+.tempthankyouImageHeader p h1 {
+  font-size: 150px;
+}
+
+.shareOptions{
+  > div {
+    z-index: 2000;
+    top: 0px;
+  }
+}
\ No newline at end of file