diff --git a/apps/potlock/widget/Cart/BreakdownSummary.jsx b/apps/potlock/widget/Cart/BreakdownSummary.jsx
index 35d8b143..5c622368 100644
--- a/apps/potlock/widget/Cart/BreakdownSummary.jsx
+++ b/apps/potlock/widget/Cart/BreakdownSummary.jsx
@@ -5,6 +5,9 @@ const {
   recipientId,
   potRferralFeeBasisPoints,
   ftIcon,
+  bypassChefFee,
+  chef,
+  chefFeeBasisPoints,
 } = props;
 const { basisPointsToPercent } = VM.require("potlock.near/widget/utils") || {
   basisPointsToPercent: () => 0,
@@ -30,8 +33,8 @@ const CHEVRON_UP_URL =
   IPFS_BASE_URL + "bafkreibdm7w6zox4znipjqlmxr66wsjjpqq4dguswo7evvrmzlnss3c3vi";
 
 const SvgIcon = styled.svg`
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
 `;
 
 const BreakdownSummary = styled.div`
@@ -39,16 +42,14 @@ const BreakdownSummary = styled.div`
   flex-direction: column;
   align-items: center;
   width: 100%;
-  cursor: pointer;
   .breakdown-details {
     display: flex;
     flex-direction: column;
     width: 100%;
     margin-top: 8px;
     gap: 12px;
-    border-radius: 8px;
     border: 1px #dbdbdb solid;
-    background: #fafafa;
+    border-radius: 8px;
     transition: all 300ms ease-in-out;
     &.hidden {
       visibility: hidden;
@@ -62,7 +63,7 @@ const BreakdownSummary = styled.div`
 const Header = styled.div`
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
+  justify-content: flex-start;
   align-items: center;
   width: 100%;
 `;
@@ -70,8 +71,7 @@ const Header = styled.div`
 const BreakdownTitle = styled.div`
   color: #2e2e2e;
   font-size: 14px;
-  line-height: 16px;
-  font-weight: 600;
+  font-weight: 500;
   word-wrap: break-word;
 `;
 
@@ -113,7 +113,6 @@ const BreakdownItem = styled.div`
 const BreakdownItemLeft = styled.div`
   color: #7b7b7b;
   font-size: 14px;
-  line-height: 20px;
   font-weight: 400;
   word-wrap: break-word;
 `;
@@ -121,8 +120,8 @@ const BreakdownItemLeft = styled.div`
 const BreakdownItemRight = styled.div`
   display: flex;
   flex-direction: row;
-  // justify-content: flex-end;
   align-items: center;
+  font-weight: 500;
   gap: 8px;
 `;
 
@@ -135,43 +134,47 @@ const BreakdownAmount = styled.div`
 `;
 
 const Icon = styled.img`
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
 `;
 
 const NearIcon = (props) => (
-  <SvgIcon
-    {...props}
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    id="near-logo"
-  >
-    <rect width="24" height="24" rx="12" fill="#CECECE" />
-    <path
-      d="M15.616 6.61333L13.1121 10.3333C12.939 10.5867 13.2719 10.8933 13.5117 10.68L15.9756 8.53333C16.0422 8.48 16.1354 8.52 16.1354 8.61333V15.32C16.1354 15.4133 16.0155 15.4533 15.9623 15.3867L8.50388 6.45333C8.26415 6.16 7.91787 6 7.53163 6H7.26526C6.5727 6 6 6.57333 6 7.28V16.72C6 17.4267 6.5727 18 7.27858 18C7.71809 18 8.13097 17.7733 8.3707 17.3867L10.8746 13.6667C11.0477 13.4133 10.7148 13.1067 10.475 13.32L8.0111 15.4533C7.94451 15.5067 7.85128 15.4667 7.85128 15.3733V8.68C7.85128 8.58667 7.97114 8.54667 8.02442 8.61333L15.4828 17.5467C15.7225 17.84 16.0821 18 16.4551 18H16.7214C17.4273 18 18 17.4267 18 16.72V7.28C18 6.57333 17.4273 6 16.7214 6C16.2686 6 15.8557 6.22667 15.616 6.61333Z"
-      fill="black"
-    />
+  <SvgIcon {...props} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_454_78)">
+      <circle cx="8" cy="8" r="7.25" stroke="#292929" stroke-width="1.5" />
+      <path
+        d="M11.1477 4C10.851 4 10.5763 4.15333 10.421 4.406L8.74866 6.88867C8.72453 6.92441 8.71422 6.96772 8.71967 7.01051C8.72511 7.05329 8.74594 7.09264 8.77826 7.1212C8.81057 7.14976 8.85218 7.1656 8.89531 7.16574C8.93844 7.16589 8.98015 7.15034 9.01266 7.122L10.6587 5.69467C10.6683 5.68598 10.6802 5.68028 10.6931 5.67828C10.7059 5.67628 10.719 5.67806 10.7308 5.6834C10.7426 5.68875 10.7526 5.69742 10.7596 5.70836C10.7665 5.7193 10.7702 5.73203 10.77 5.745V10.215C10.77 10.2287 10.7658 10.2421 10.7579 10.2534C10.7501 10.2646 10.7389 10.2732 10.726 10.2778C10.7131 10.2825 10.6991 10.2831 10.6858 10.2795C10.6726 10.2758 10.6608 10.2682 10.652 10.2577L5.67667 4.30167C5.59667 4.20709 5.49701 4.1311 5.38463 4.079C5.27226 4.0269 5.14987 3.99994 5.026 4H4.85233C4.62628 4 4.40949 4.0898 4.24964 4.24964C4.0898 4.40949 4 4.62628 4 4.85233V11.1477C4 11.3333 4.06061 11.5139 4.17263 11.6619C4.28465 11.81 4.44194 11.9174 4.6206 11.9679C4.79926 12.0184 4.98952 12.0091 5.16245 11.9416C5.33538 11.874 5.48152 11.7519 5.57867 11.5937L7.251 9.111C7.27513 9.07525 7.28544 9.03194 7.27999 8.98916C7.27455 8.94637 7.25372 8.90703 7.22141 8.87846C7.18909 8.8499 7.14748 8.83407 7.10435 8.83392C7.06122 8.83377 7.01951 8.84932 6.987 8.87766L5.341 10.3053C5.33134 10.3139 5.31939 10.3195 5.3066 10.3215C5.29381 10.3234 5.28074 10.3216 5.26898 10.3162C5.25721 10.3108 5.24726 10.3021 5.24034 10.2912C5.23342 10.2803 5.22983 10.2676 5.23 10.2547V5.784C5.22997 5.77027 5.23418 5.75687 5.24206 5.74563C5.24993 5.73438 5.26109 5.72584 5.274 5.72117C5.28691 5.71651 5.30094 5.71594 5.31419 5.71955C5.32743 5.72315 5.33924 5.73076 5.348 5.74133L10.3227 11.698C10.4847 11.8893 10.7227 11.9997 10.9733 12H11.147C11.373 12.0001 11.5898 11.9104 11.7498 11.7507C11.9097 11.591 11.9997 11.3744 12 11.1483V4.85233C11.9999 4.62631 11.9101 4.40956 11.7503 4.24974C11.5904 4.08992 11.3737 4.00009 11.1477 4Z"
+        fill="#292929"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_454_78">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
   </SvgIcon>
 );
 
 State.init({
-  showBreakdown: false,
+  showBreakdown: true,
 });
 
 if (!donationContractConfig) return "";
 
 const {
-  protocol_fee_basis_points: protocolFeeBasisPoints,
+  protocol_fee_basis_points,
   referral_fee_basis_points,
   protocol_fee_recipient_account: protocolFeeRecipientAccount,
 } = donationContractConfig;
 
-const referralFeeBasisPoints = potRferralFeeBasisPoints || referralFeeBasisPoints;
+const protocolFeeBasisPoints = props.protocolFeeBasisPoints ?? protocol_fee_basis_points;
+const referralFeeBasisPoints = potRferralFeeBasisPoints || props.referralFeeBasisPoints;
 
 const TOTAL_BASIS_POINTS = 10_000;
 let projectAllocationBasisPoints =
-  TOTAL_BASIS_POINTS - (bypassProtocolFee ? 0 : protocolFeeBasisPoints);
+  TOTAL_BASIS_POINTS -
+  (bypassProtocolFee || !protocolFeeBasisPoints ? 0 : protocolFeeBasisPoints) -
+  (bypassChefFee || !chefFeeBasisPoints ? 0 : chefFeeBasisPoints);
 if (referrerId) {
   projectAllocationBasisPoints -= referralFeeBasisPoints;
 }
@@ -182,78 +185,69 @@ const protocolFeePercent = basisPointsToPercent(protocolFeeBasisPoints);
 const protocolFeeAmount = (parseFloat(totalAmount) * protocolFeeBasisPoints) / TOTAL_BASIS_POINTS;
 const referrerFeePercent = basisPointsToPercent(referralFeeBasisPoints);
 const referrerFeeAmount = (parseFloat(totalAmount) * referralFeeBasisPoints) / TOTAL_BASIS_POINTS;
-
-const nearIconUrl = SUPPORTED_FTS.NEAR.iconUrl;
+const chefFeePercent = basisPointsToPercent(chefFeeBasisPoints);
+const chefFeeAmount = (parseFloat(totalAmount) * chefFeeBasisPoints) / TOTAL_BASIS_POINTS;
+
+const fees = [
+  {
+    label: "Protocol fee",
+    percentage: protocolFeePercent,
+    amount: protocolFeeAmount,
+    show: !bypassProtocolFee,
+  },
+  {
+    label: "Referrer fee",
+    percentage: referrerFeePercent,
+    amount: referrerFeeAmount,
+    show: referrerId,
+  },
+  {
+    label: "Chef fee",
+    percentage: chefFeePercent,
+    amount: chefFeeAmount,
+    show: !bypassChefFee && chefFeeBasisPoints,
+  },
+  {
+    label: "On-Chain Storage",
+    percentage: "",
+    amount: "<0.01",
+    show: true,
+  },
+  {
+    label: "Project allocation",
+    percentage: projectAllocationPercent,
+    amount: projectAllocationAmount,
+    show: true,
+  },
+];
 
 return (
   <BreakdownSummary
     style={props.containerStyle || {}}
-    onClick={() => State.update({ showBreakdown: !state.showBreakdown })}
+    // onClick={() => State.update({ showBreakdown: !state.showBreakdown })}
   >
     <Header style={props.headerStyle || {}}>
-      <BreakdownTitle style={{ fontSize: "14px", lineHeight: "16px" }}>
-        {state.showBreakdown ? "Hide" : "Show"} breakdown
-      </BreakdownTitle>
-      <ChevronIcon
-        style={{
-          rotate: state.showBreakdown ? "0deg" : "180deg",
-        }}
-        viewBox="0 0 12 8"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 0.295013L0 6.29501L1.41 7.70501L6 3.12501L10.59 7.70501L12 6.29501L6 0.295013Z"
-          fill="#7B7B7B"
-        />
-      </ChevronIcon>
+      <BreakdownTitle> Breakdown</BreakdownTitle>
     </Header>
     <div
       className={`breakdown-details ${!state.showBreakdown ? "hidden" : ""}`}
       active={state.showBreakdown}
     >
-      {!bypassProtocolFee && (
-        <BreakdownItem>
-          <BreakdownItemLeft>
-            Protocol fee ({protocolFeePercent}% to {protocolFeeRecipientAccount})
-          </BreakdownItemLeft>
-          <BreakdownItemRight>
-            <BreakdownAmount>
-              {protocolFeeAmount ? protocolFeeAmount.toFixed(2) : "-"}
-            </BreakdownAmount>
-            {ftIcon ? <Icon src={ftIcon} /> : <NearIcon />}{" "}
-          </BreakdownItemRight>
-        </BreakdownItem>
-      )}
-      {referrerId && (
-        <BreakdownItem>
-          <BreakdownItemLeft>
-            Referrer fee ({referrerFeePercent}% to {referrerId})
-          </BreakdownItemLeft>
-          <BreakdownItemRight>
-            <BreakdownAmount>
-              {referrerFeeAmount ? referrerFeeAmount.toFixed(2) : "-"}
-            </BreakdownAmount>
-            {ftIcon ? <Icon src={ftIcon} /> : <NearIcon />}
-          </BreakdownItemRight>
-        </BreakdownItem>
-      )}
-      <BreakdownItem>
-        <BreakdownItemLeft>On-Chain Storage</BreakdownItemLeft>
-        <BreakdownItemRight>
-          <BreakdownAmount>{"<0.01"}</BreakdownAmount>
-          {ftIcon ? <Icon src={ftIcon} /> : <NearIcon />}
-        </BreakdownItemRight>
-      </BreakdownItem>
-      <BreakdownItem>
-        <BreakdownItemLeft>
-          Project allocation (~{projectAllocationPercent}% to {recipientId || "project"})
-        </BreakdownItemLeft>
-        <BreakdownItemRight>
-          <BreakdownAmount>~{projectAllocationAmount.toFixed(2)}</BreakdownAmount>
-          {ftIcon ? <Icon src={ftIcon} /> : <NearIcon />}
-        </BreakdownItemRight>
-      </BreakdownItem>
+      {fees.map(({ show, amount, label, percentage }) => {
+        return show ? (
+          <BreakdownItem key={label}>
+            <BreakdownItemLeft>
+              {label} {percentage ? `(${percentage}%)` : ""}{" "}
+            </BreakdownItemLeft>
+            <BreakdownItemRight>
+              <BreakdownAmount>{typeof amount === "string" ? amount : amount}</BreakdownAmount>
+              {ftIcon ? <Icon src={ftIcon} alt="ft-icon" /> : <NearIcon />}
+            </BreakdownItemRight>
+          </BreakdownItem>
+        ) : (
+          ""
+        );
+      })}
     </div>
   </BreakdownSummary>
 );
diff --git a/apps/potlock/widget/Cart/Modal.jsx b/apps/potlock/widget/Cart/Modal.jsx
index 1ebfc447..781076dc 100644
--- a/apps/potlock/widget/Cart/Modal.jsx
+++ b/apps/potlock/widget/Cart/Modal.jsx
@@ -22,7 +22,8 @@ const ModalOverlay = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(4px);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -38,10 +39,11 @@ const ModalOverlay = styled.div`
 
 const ModalContainer = styled.div`
   width: 383px;
+  border-radius: 12px;
+  box-shadow: 0px 0px 0px 1px rgba(41, 41, 41, 0.1), 0px 8px 12px -4px rgba(41, 41, 41, 0.1),
+    0px 20px 32px -10px rgba(41, 41, 41, 0.1), 0px 32px 44px -16px rgba(41, 41, 41, 0.1);
   padding: 24px 0px;
   background: white;
-  border-radius: 10px;
-  box-shadow: 20px 20px 32px -4px rgba(93, 93, 93, 0.06);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
diff --git a/apps/potlock/widget/Components/Banner.jsx b/apps/potlock/widget/Components/Banner.jsx
index 61658f72..8ab55db2 100644
--- a/apps/potlock/widget/Components/Banner.jsx
+++ b/apps/potlock/widget/Components/Banner.jsx
@@ -52,7 +52,7 @@ const Container = styled.div`
   bottom: 0;
   left: 0;
   position: fixed;
-  z-index: 1000;
+  z-index: 999;
   background: #7fc41e;
   color: white;
   display: flex;
diff --git a/apps/potlock/widget/Components/Modal.jsx b/apps/potlock/widget/Components/Modal.jsx
index 6fac3986..9df26301 100644
--- a/apps/potlock/widget/Components/Modal.jsx
+++ b/apps/potlock/widget/Components/Modal.jsx
@@ -15,14 +15,16 @@ const ModalOverlay = styled.div`
 `;
 
 const ModalContent = styled.div`
-  border-radius: 6px;
   width: 100%;
   max-width: 600px;
   padding: 24px 24px 18px 24px;
   background: white;
-  border: 1px rgba(41, 41, 41, 0.4) solid;
   display: flex;
   flex-direction: column;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0px 0px 0px 1px rgba(41, 41, 41, 0.1), 0px 8px 12px -4px rgba(41, 41, 41, 0.1),
+    0px 20px 32px -10px rgba(41, 41, 41, 0.1), 0px 32px 44px -16px rgba(41, 41, 41, 0.1);
 `;
 
 const overlayStyle = props.overlayStyle || {};
diff --git a/apps/potlock/widget/Inputs/Dropdown.jsx b/apps/potlock/widget/Inputs/Dropdown.jsx
index 737d50a5..7765b2e7 100644
--- a/apps/potlock/widget/Inputs/Dropdown.jsx
+++ b/apps/potlock/widget/Inputs/Dropdown.jsx
@@ -78,7 +78,7 @@ return (
   <>
     {openFilter && <Screen onClick={() => setOpenFilter(false)} />}
     <div style={{ position: "relative" }} onClick={() => setOpenFilter(!openFilter)}>
-      <FilterButton>
+      <FilterButton style={props.buttonStyle || {}}>
         {sortVal || title}
         <FilterIcon>
           <svg
@@ -96,7 +96,7 @@ return (
         </FilterIcon>
       </FilterButton>
       {openFilter && (
-        <FilterMenu onClick={(e) => e.stopPropagation()}>
+        <FilterMenu onClick={(e) => e.stopPropagation()} style={props.menuStyle || {}}>
           {sortList.map((option) => (
             <FilterItem
               key={option.val}
diff --git a/apps/potlock/widget/Inputs/Select.jsx b/apps/potlock/widget/Inputs/Select.jsx
index 79a55ecb..90522a57 100644
--- a/apps/potlock/widget/Inputs/Select.jsx
+++ b/apps/potlock/widget/Inputs/Select.jsx
@@ -143,9 +143,7 @@ return (
             aria-label={value.value}
             placeholder={<Placeholder>{placeholder}</Placeholder>}
           />
-          {/* {props.iconRight ? (
-            <Select.Icon>{props.iconRight}</Select.Icon>
-          ) : ( */}
+
           <Select.Icon>
             <svg
               width="12"
@@ -155,15 +153,11 @@ return (
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M1 1.5L6 6.5L11 1.5"
-                stroke="currentColor"
-                stroke-width="1.66667"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+                d="M10.59 0.295044L6 4.87504L1.41 0.295044L0 1.70504L6 7.70504L12 1.70504L10.59 0.295044Z"
+                fill="#7B7B7B"
               />
             </svg>
           </Select.Icon>
-          {/* )} */}
         </Input>
       </Select.Trigger>
 
diff --git a/apps/potlock/widget/Inputs/Text.jsx b/apps/potlock/widget/Inputs/Text.jsx
index 40731d2c..15c3007d 100644
--- a/apps/potlock/widget/Inputs/Text.jsx
+++ b/apps/potlock/widget/Inputs/Text.jsx
@@ -90,8 +90,6 @@ return (
   <Container>
     {label && <Label>{label}</Label>}
     <InputContainer>
-      {/* {props.prefixText && <InputPrefix>{props.prefixText}</InputPrefix>} */}
-      {/* {props.prefixElement && props.prefixElement} */}
       {props.preInputChildren && props.preInputChildren}
       <Input
         type="text"
diff --git a/apps/potlock/widget/ModalDonation/AmountInput.jsx b/apps/potlock/widget/ModalDonation/AmountInput.jsx
new file mode 100644
index 00000000..c2383c94
--- /dev/null
+++ b/apps/potlock/widget/ModalDonation/AmountInput.jsx
@@ -0,0 +1,138 @@
+const { ownerId } = VM.require("potlock.near/widget/constants") || {
+  ownerId: "",
+};
+
+const { nearToUsd } = VM.require("potlock.near/widget/utils");
+
+const SvgIcon = styled.svg`
+  width: 16px;
+`;
+
+const NearIcon = (props) => (
+  <SvgIcon {...props} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_454_78)">
+      <circle cx="8" cy="8" r="7.25" stroke="#292929" stroke-width="1.5" />
+      <path
+        d="M11.1477 4C10.851 4 10.5763 4.15333 10.421 4.406L8.74866 6.88867C8.72453 6.92441 8.71422 6.96772 8.71967 7.01051C8.72511 7.05329 8.74594 7.09264 8.77826 7.1212C8.81057 7.14976 8.85218 7.1656 8.89531 7.16574C8.93844 7.16589 8.98015 7.15034 9.01266 7.122L10.6587 5.69467C10.6683 5.68598 10.6802 5.68028 10.6931 5.67828C10.7059 5.67628 10.719 5.67806 10.7308 5.6834C10.7426 5.68875 10.7526 5.69742 10.7596 5.70836C10.7665 5.7193 10.7702 5.73203 10.77 5.745V10.215C10.77 10.2287 10.7658 10.2421 10.7579 10.2534C10.7501 10.2646 10.7389 10.2732 10.726 10.2778C10.7131 10.2825 10.6991 10.2831 10.6858 10.2795C10.6726 10.2758 10.6608 10.2682 10.652 10.2577L5.67667 4.30167C5.59667 4.20709 5.49701 4.1311 5.38463 4.079C5.27226 4.0269 5.14987 3.99994 5.026 4H4.85233C4.62628 4 4.40949 4.0898 4.24964 4.24964C4.0898 4.40949 4 4.62628 4 4.85233V11.1477C4 11.3333 4.06061 11.5139 4.17263 11.6619C4.28465 11.81 4.44194 11.9174 4.6206 11.9679C4.79926 12.0184 4.98952 12.0091 5.16245 11.9416C5.33538 11.874 5.48152 11.7519 5.57867 11.5937L7.251 9.111C7.27513 9.07525 7.28544 9.03194 7.27999 8.98916C7.27455 8.94637 7.25372 8.90703 7.22141 8.87846C7.18909 8.8499 7.14748 8.83407 7.10435 8.83392C7.06122 8.83377 7.01951 8.84932 6.987 8.87766L5.341 10.3053C5.33134 10.3139 5.31939 10.3195 5.3066 10.3215C5.29381 10.3234 5.28074 10.3216 5.26898 10.3162C5.25721 10.3108 5.24726 10.3021 5.24034 10.2912C5.23342 10.2803 5.22983 10.2676 5.23 10.2547V5.784C5.22997 5.77027 5.23418 5.75687 5.24206 5.74563C5.24993 5.73438 5.26109 5.72584 5.274 5.72117C5.28691 5.71651 5.30094 5.71594 5.31419 5.71955C5.32743 5.72315 5.33924 5.73076 5.348 5.74133L10.3227 11.698C10.4847 11.8893 10.7227 11.9997 10.9733 12H11.147C11.373 12.0001 11.5898 11.9104 11.7498 11.7507C11.9097 11.591 11.9997 11.3744 12 11.1483V4.85233C11.9999 4.62631 11.9101 4.40956 11.7503 4.24974C11.5904 4.08992 11.3737 4.00009 11.1477 4Z"
+        fill="#292929"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_454_78">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </SvgIcon>
+);
+
+const Container = styled.div`
+  position: relative;
+  display: flex;
+  border-radius: 6px;
+  border: 1px solid #dbdbdb;
+  border-bottom: 2px solid #dbdbdb;
+  background: #fff;
+  input {
+    padding: 0.75rem 1rem;
+    flex: 1;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    &:focus {
+      box-shadow: none;
+    }
+  }
+  .usd-amount {
+    padding-right: 12px;
+    color: #7b7b7b;
+    display: flex;
+    align-items: center;
+    border-right: 1px solid #dbdbdb;
+  }
+`;
+
+const DropdownWrapper = styled.div`
+  display: flex;
+  span {
+    font-weight: 500;
+  }
+`;
+
+const PotDenominatio = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 1rem;
+  .text {
+    font-weight: 500;
+  }
+`;
+
+const Dropdown = ({ selectedDenomination, denominationOptions, updateState }) => (
+  <DropdownWrapper>
+    <Widget
+      src={`${ownerId}/widget/Inputs.Select`}
+      props={{
+        noLabel: true,
+        placeholder: "",
+        options: denominationOptions,
+        value: {
+          text: selectedDenomination.text,
+          value: selectedDenomination.value,
+        },
+        onChange: ({ value }) => {
+          updateState({
+            selectedDenomination: denominationOptions.find((option) => option.value === value),
+          });
+        },
+        containerStyles: {
+          width: "auto",
+        },
+        inputStyles: {
+          border: "none",
+          boxShadow: "none",
+          width: "auto",
+          padding: "12px 16px",
+          height: "100%",
+          color: "#292929",
+        },
+        iconLeft: selectedDenomination.icon ? (
+          <img src={selectedDenomination.icon} style={{ height: "16px", width: "16px" }} />
+        ) : (
+          <NearIcon />
+        ),
+      }}
+    />
+  </DropdownWrapper>
+);
+
+const AmountInput = (props) => {
+  const { value, HandleAmoutChange, donationType, denominationOptions, selectedDenomination } =
+    props;
+  return (
+    <Container>
+      <input
+        type="text"
+        value={value}
+        placeholder="0"
+        onChange={(e) => HandleAmoutChange(e.target.value)}
+      />
+      <div className="usd-amount">
+        {" "}
+        {nearToUsd && selectedDenomination.value === "NEAR"
+          ? `~$ ${(nearToUsd * value).toFixed(2)}`
+          : ""}
+      </div>
+      {donationType === "pot" || denominationOptions.length === 1 ? (
+        <PotDenominatio>
+          <NearIcon />
+          <div className="text">{denominationOptions[0].text}</div>
+        </PotDenominatio>
+      ) : (
+        <Dropdown {...props} />
+      )}
+    </Container>
+  );
+};
+
+return { AmountInput };
diff --git a/apps/potlock/widget/ModalDonation/Banners.jsx b/apps/potlock/widget/ModalDonation/Banners.jsx
new file mode 100644
index 00000000..cc344afd
--- /dev/null
+++ b/apps/potlock/widget/ModalDonation/Banners.jsx
@@ -0,0 +1,89 @@
+const AlertBanner = styled.div`
+  display: flex;
+  padding: 0.75rem 1rem;
+  color: #ed464f;
+  gap: 1rem;
+  align-items: center;
+  border: 1px solid #f4b37d;
+  border-radius: 6px;
+  background: #fef6ee;
+  margin-top: 1.5rem;
+  div {
+    font-weight: 500;
+  }
+  .icon {
+    width: 22px;
+  }
+`;
+
+const NadabotBanner = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border: 1px solid #f4b37d;
+  border-radius: 6px;
+  background: #fef6ee;
+  flex-wrap: wrap;
+  margin-top: 1.5rem;
+  .label {
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    gap: 1rem;
+    img {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  .verify {
+    color: #dd3345;
+    font-weight: 500;
+    margin-left: auto;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  @media only screen and (max-width: 480px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0px;
+    .labe {
+      align-items: flex-start;
+    }
+    .verify {
+      margin-left: 40px;
+    }
+  }
+`;
+const NADA_BOT_ICON = "bafkreicojpp23dmf7hakbt67eah4ba52dx3reekdccaupoggzzlhdkroyi";
+
+const Alert = ({ error }) => (
+  <AlertBanner>
+    <div className="icon">
+      <svg viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M11 4.49L18.53 17.5H3.47L11 4.49ZM11 0.5L0 19.5H22L11 0.5ZM12 14.5H10V16.5H12V14.5ZM12 8.5H10V12.5H12V8.5Z"
+          fill="#F6767A"
+        />
+      </svg>
+    </div>
+    <div>{error}</div>
+  </AlertBanner>
+);
+
+const Nadabot = () => (
+  <NadabotBanner>
+    <div className="label">
+      <img src={`https://ipfs.near.social/ipfs/${NADA_BOT_ICON}`} alt="nadabot" />
+      You need to be verified to donate.
+    </div>
+    <a href="https://app.nada.bot/" target="_blank" className="verify">
+      Verify to donate
+    </a>
+  </NadabotBanner>
+);
+
+return {
+  Alert,
+  Nadabot,
+};
diff --git a/apps/potlock/widget/ModalDonation/Checks.jsx b/apps/potlock/widget/ModalDonation/Checks.jsx
new file mode 100644
index 00000000..56baa4d6
--- /dev/null
+++ b/apps/potlock/widget/ModalDonation/Checks.jsx
@@ -0,0 +1,82 @@
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  > div {
+    display: flex;
+    border-radius: 8px;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    cursor: pointer;
+    border: 1px solid #dbdbdb;
+    color: #7b7b7b;
+    background: white;
+    transition: all 300ms;
+    .text {
+      flex: 1;
+      font-weight: 500;
+    }
+    &.active {
+      box-shadow: 0px 0px 1.4px 2px #fee6e5;
+      color: #dd3345;
+      border-color: #dd3345;
+      span {
+        color: #7b7b7b;
+      }
+    }
+    &.disabled {
+      pointer-events: none;
+      color: #a6a6a6;
+      background: #f6f5f3;
+      span {
+        color: #a6a6a6;
+      }
+    }
+  }
+`;
+
+const CheckBox = styled.div`
+  width: 20px;
+  height: 20px;
+  border: 2px solid #d9d9d9;
+  display: flex;
+  border-radius: 50%;
+  div {
+    width: 10px;
+    height: 10px;
+    background: transparent;
+    border-radius: 50%;
+    margin: auto;
+  }
+  &.active {
+    border-color: #dd3345;
+    div {
+      background: #dd3345;
+    }
+  }
+`;
+
+const Checks = ({ options, value, onClick }) => {
+  return (
+    <Container>
+      {options.map((option) => (
+        <div
+          key={option.val}
+          onClick={() => onClick(option.val)}
+          className={`${value === option.val ? "active" : ""} ${option.disabled ? "disabled" : ""}`}
+        >
+          <CheckBox className={`${value === option.val ? "active" : ""}`}>
+            <div></div>
+          </CheckBox>
+          <div className="text">
+            {option.label} {option.info && <span> {option.info} </span>}
+            {option.disabled && <span> {option.disabledText} </span>}
+          </div>
+        </div>
+      ))}
+    </Container>
+  );
+};
+
+return { Checks };
diff --git a/apps/potlock/widget/ModalDonation/ConfirmDirect.jsx b/apps/potlock/widget/ModalDonation/ConfirmDirect.jsx
new file mode 100644
index 00000000..4e1e397b
--- /dev/null
+++ b/apps/potlock/widget/ModalDonation/ConfirmDirect.jsx
@@ -0,0 +1,541 @@
+const { ownerId, NADABOT_HUMAN_METHOD, DONATION_CONTRACT_ID } = VM.require(
+  "potlock.near/widget/constants"
+) || {
+  ownerId: "",
+  NADABOT_HUMAN_METHOD: "",
+  DONATION_CONTRACT_ID: "",
+};
+
+const { nearToUsd } = VM.require("potlock.near/widget/utils");
+
+let DonateSDK =
+  VM.require("potlock.near/widget/SDK.donate") ||
+  (() => ({
+    getConfig: () => {},
+    asyncGetDonationsForDonor: () => {},
+  }));
+DonateSDK = DonateSDK({ env: props.env });
+
+const PotSDK = VM.require("potlock.near/widget/SDK.pot") || {
+  getConfig: () => {},
+  asyncGetDonationsForDonor: () => {},
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem 2rem;
+`;
+
+const Label = styled.div`
+  font-weight: 500;
+  margin-bottom: 4px;
+`;
+const Amout = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  span {
+    font-weight: 600;
+  }
+  div {
+    font-weight: 600;
+    font-size: 1rem;
+  }
+  .usd-amount {
+    color: #7b7b7b;
+  }
+  img,
+  svg {
+    width: 20px;
+  }
+`;
+
+const SvgIcon = styled.svg`
+  width: 16px;
+`;
+
+const NoteWrapper = styled.div`
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 8px;
+  svg {
+    width: 14px;
+  }
+  div {
+    font-weight: 500;
+  }
+`;
+
+const FeesRemoval = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  .check {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  .label {
+    margin-right: 4px;
+    margin-left: 8px;
+  }
+  .address {
+    font-weight: 600;
+    gap: 4px;
+    display: flex;
+    align-items: center;
+    color: #292929;
+    transition: all 300ms;
+    &:hover {
+      color: #dd3345;
+      text-decoration: none;
+    }
+  }
+  .profile-image {
+    width: 17px;
+    height: 17px;
+    display: flex !important;
+  }
+  @media only screen and (max-width: 480px) {
+    .address {
+      margin-left: 34px;
+      width: 100%;
+    }
+  }
+`;
+
+const Button = styled.div`
+  display: flex;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+  button {
+    padding: 12px 16px;
+    width: 100%;
+    font-weight: 500;
+  }
+`;
+
+const NearIcon = (props) => (
+  <SvgIcon {...props} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_454_78)">
+      <circle cx="8" cy="8" r="7.25" stroke="#292929" stroke-width="1.5" />
+      <path
+        d="M11.1477 4C10.851 4 10.5763 4.15333 10.421 4.406L8.74866 6.88867C8.72453 6.92441 8.71422 6.96772 8.71967 7.01051C8.72511 7.05329 8.74594 7.09264 8.77826 7.1212C8.81057 7.14976 8.85218 7.1656 8.89531 7.16574C8.93844 7.16589 8.98015 7.15034 9.01266 7.122L10.6587 5.69467C10.6683 5.68598 10.6802 5.68028 10.6931 5.67828C10.7059 5.67628 10.719 5.67806 10.7308 5.6834C10.7426 5.68875 10.7526 5.69742 10.7596 5.70836C10.7665 5.7193 10.7702 5.73203 10.77 5.745V10.215C10.77 10.2287 10.7658 10.2421 10.7579 10.2534C10.7501 10.2646 10.7389 10.2732 10.726 10.2778C10.7131 10.2825 10.6991 10.2831 10.6858 10.2795C10.6726 10.2758 10.6608 10.2682 10.652 10.2577L5.67667 4.30167C5.59667 4.20709 5.49701 4.1311 5.38463 4.079C5.27226 4.0269 5.14987 3.99994 5.026 4H4.85233C4.62628 4 4.40949 4.0898 4.24964 4.24964C4.0898 4.40949 4 4.62628 4 4.85233V11.1477C4 11.3333 4.06061 11.5139 4.17263 11.6619C4.28465 11.81 4.44194 11.9174 4.6206 11.9679C4.79926 12.0184 4.98952 12.0091 5.16245 11.9416C5.33538 11.874 5.48152 11.7519 5.57867 11.5937L7.251 9.111C7.27513 9.07525 7.28544 9.03194 7.27999 8.98916C7.27455 8.94637 7.25372 8.90703 7.22141 8.87846C7.18909 8.8499 7.14748 8.83407 7.10435 8.83392C7.06122 8.83377 7.01951 8.84932 6.987 8.87766L5.341 10.3053C5.33134 10.3139 5.31939 10.3195 5.3066 10.3215C5.29381 10.3234 5.28074 10.3216 5.26898 10.3162C5.25721 10.3108 5.24726 10.3021 5.24034 10.2912C5.23342 10.2803 5.22983 10.2676 5.23 10.2547V5.784C5.22997 5.77027 5.23418 5.75687 5.24206 5.74563C5.24993 5.73438 5.26109 5.72584 5.274 5.72117C5.28691 5.71651 5.30094 5.71594 5.31419 5.71955C5.32743 5.72315 5.33924 5.73076 5.348 5.74133L10.3227 11.698C10.4847 11.8893 10.7227 11.9997 10.9733 12H11.147C11.373 12.0001 11.5898 11.9104 11.7498 11.7507C11.9097 11.591 11.9997 11.3744 12 11.1483V4.85233C11.9999 4.62631 11.9101 4.40956 11.7503 4.24974C11.5904 4.08992 11.3737 4.00009 11.1477 4Z"
+        fill="#292929"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_454_78">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </SvgIcon>
+);
+
+const ProfileImg = ({ accountId }) => (
+  <Widget
+    src={`${ownerId}/widget/Project.ProfileImage`}
+    props={{
+      accountId,
+      style: {},
+    }}
+  />
+);
+
+const CheckBox = ({ id, checked, onClick }) => (
+  <Widget
+    src={`${ownerId}/widget/Inputs.Checkbox`}
+    props={{
+      id,
+      checked,
+      onClick,
+    }}
+  />
+);
+
+const getFeesBasisPoints = (protocolConfig, potDetail, donationContractConfig) => {
+  if (protocolConfig) {
+    return [
+      protocolConfig.account_id,
+      protocolConfig.basis_points,
+      potDetail.referral_fee_public_round_basis_points,
+    ];
+  } else if (donationContractConfig) {
+    return [
+      donationContractConfig.protocol_fee_recipient_account,
+      donationContractConfig.protocol_fee_basis_points,
+      donationContractConfig.referral_fee_basis_points,
+    ];
+  } else {
+    return ["", 0, 0];
+  }
+};
+
+const pollForDonationSuccess = ({
+  projectId: donatedProject,
+  afterTs,
+  accountId,
+  openDonationSuccessModal,
+  isPotDonation,
+}) => {
+  // poll for updates
+  // TODO: update this to also poll Pot contract
+  const pollIntervalMs = 1000;
+  // const totalPollTimeMs = 60000; // consider adding in to make sure interval doesn't run indefinitely
+  const pollId = setInterval(() => {
+    (isPotDonation ? PotSDK : DonateSDK).asyncGetDonationsForDonor(accountId).then((donations) => {
+      for (const donation of donations) {
+        const { recipient_id, project_id, donated_at_ms, donated_at } = donation; // donation contract uses recipient_id, pot contract uses project_id; donation contract uses donated_at_ms, pot contract uses donated_at
+
+        if (
+          ((project_id || recipient_id) === donatedProject &&
+            (donated_at_ms || donated_at) > afterTs) ||
+          donated_at > afterTs
+        ) {
+          // display success message
+          clearInterval(pollId);
+
+          openDonationSuccessModal({
+            projectId: donation,
+          });
+        }
+      }
+    });
+  }, pollIntervalMs);
+};
+
+const ConfirmDirect = (props) => {
+  const {
+    selectedDenomination,
+    bypassProtocolFee,
+    bypassChefFee,
+    donationNote,
+    donationNoteError,
+    addNote,
+    updateState,
+    selectedRound,
+    projectId,
+    referrerId,
+    accountId,
+    amount,
+    openDonationSuccessModal,
+    donationType,
+  } = props;
+
+  // Get protcol, referral & chef Fee
+  const potDetail = PotSDK.getConfig(selectedRound);
+
+  const protocolConfigContractId = potDetail
+    ? potDetail.protocol_config_provider.split(":")[0]
+    : "";
+  const protocolConfigViewMethodName = potDetail
+    ? potDetail.protocol_config_provider.split(":")[1]
+    : "";
+  const protocolConfig =
+    protocolConfigContractId && protocolConfigViewMethodName
+      ? Near.view(protocolConfigContractId, protocolConfigViewMethodName, {})
+      : null;
+
+  const donationContractConfig = !potDetail ? DonateSDK.getConfig() || {} : null;
+
+  const [protocolFeeRecipientAccount, protocolFeeBasisPoints, referralFeeBasisPoints] =
+    getFeesBasisPoints(protocolConfig, potDetail, donationContractConfig);
+
+  const chefFeeBasisPoints = donationType === "pot" ? potDetail?.chef_fee_basis_points : "";
+
+  const storageBalanceBounds = Near.view(selectedDenomination.id, "storage_balance_bounds", {});
+  const storageBalanceProtocolFeeRecipient = Near.view(
+    selectedDenomination.id,
+    "storage_balance_of",
+    { account_id: protocolFeeRecipientAccount }
+  );
+  const storageBalanceReferrer = referrerId
+    ? Near.view(selectedDenomination.id, "storage_balance_of", {
+        account_id: referrerId,
+      })
+    : null;
+  const storageBalanceDonationContract = Near.view(selectedDenomination.id, "storage_balance_of", {
+    account_id: DONATION_CONTRACT_ID,
+  });
+
+  const handleDonate = () => {
+    const donationAmountIndivisible = Big(amount).mul(
+      new Big(10).pow(selectedDenomination.decimals)
+    );
+
+    const args = {
+      referrer_id: referrerId,
+      bypass_protocol_fee: bypassProtocolFee,
+      message: donationNote,
+      ...(bypassChefFee ? { custom_chef_fee_basis_points: 0 } : {}),
+    };
+
+    const potId = selectedRound || null;
+    const isPotDonation = potId && donationType === "pot";
+
+    const now = Date.now();
+
+    const successArgs = {
+      projectId,
+      afterTs: now,
+      accountId,
+      openDonationSuccessModal,
+      isPotDonation,
+    };
+
+    if (isPotDonation) {
+      args.project_id = projectId;
+      if (bypassChefFee) {
+        args.custom_chef_fee_basis_points = 0;
+      }
+    } else {
+      args.recipient_id = projectId;
+    }
+    // FT WORKFLOW:
+    // 1. SEND DEPOSIT TO DONATION CONTRACT
+    /// 2. CALL FT CONTRACT:
+    /// - check for storage balance for all accounts (protocol fee recipient, referrer, project, donation contract)
+    const transactions = [];
+
+    const isFtDonation = selectedDenomination.text !== "NEAR";
+
+    if (isFtDonation) {
+      const ftId = selectedDenomination.id;
+      // add storage deposit transaction
+      let requiredDepositFloat = 0.012; // base amount for donation storage
+      requiredDepositFloat += 0.0001 * args.message.length; // add 0.0001 NEAR per character in message
+      transactions.push({
+        contractName: DONATION_CONTRACT_ID,
+        methodName: "storage_deposit",
+        args: {},
+        deposit: Big(requiredDepositFloat).mul(Big(10).pow(24)),
+        gas: "100000000000000",
+      });
+      const { min, max } = storageBalanceBounds;
+      const storageMaxBig = Big(max);
+
+      // check storage balance for each account
+      if (
+        !args.bypass_protocol_fee &&
+        (!storageBalanceProtocolFeeRecipient ||
+          Big(storageBalanceProtocolFeeRecipient.total).lt(storageMaxBig))
+      ) {
+        transactions.push({
+          contractName: ftId,
+          methodName: "storage_deposit",
+          args: { account_id: protocolFeeRecipientAccount },
+          deposit: storageMaxBig.minus(Big(storageBalanceProtocolFeeRecipient || 0)),
+          gas: "100000000000000",
+        });
+      }
+      // referrer
+      if (
+        referrerId &&
+        (!storageBalanceReferrer || Big(storageBalanceReferrer.total).lt(storageMaxBig))
+      ) {
+        transactions.push({
+          contractName: ftId,
+          methodName: "storage_deposit",
+          args: { account_id: referrerId },
+          deposit: storageMaxBig.minus(Big(storageBalanceReferrer || 0)),
+          gas: "100000000000000",
+        });
+      }
+      // donation contract
+      if (
+        !storageBalanceDonationContract ||
+        Big(storageBalanceDonationContract.total).lt(storageMaxBig)
+      ) {
+        transactions.push({
+          contractName: ftId,
+          methodName: "storage_deposit",
+          args: { account_id: DONATION_CONTRACT_ID },
+          deposit: storageMaxBig.minus(Big(storageBalanceDonationContract || 0)),
+          gas: "100000000000000",
+        });
+      }
+      // project (can't do this till this point)
+      Near.asyncView(ftId, "storage_balance_of", { account_id: projectId }).then((balance) => {
+        if (!balance || Big(balance.total).lt(storageMaxBig)) {
+          transactions.push({
+            contractName: ftId,
+            methodName: "storage_deposit",
+            args: { account_id: projectId },
+            deposit: storageMaxBig.minus(Big(balance || 0)),
+            gas: "100000000000000",
+          });
+        }
+
+        // add donation transaction
+        transactions.push({
+          contractName: ftId,
+          methodName: "ft_transfer_call",
+          args: {
+            receiver_id: DONATION_CONTRACT_ID,
+            amount: donationAmountIndivisible.toFixed(0),
+            msg: JSON.stringify({
+              recipient_id: projectId,
+              referrer_id: referrerId || null,
+              bypass_protocol_fee: bypassProtocolFee,
+              message: args.message,
+            }),
+          },
+          deposit: "1",
+          gas: "300000000000000",
+        });
+        Near.call(transactions);
+        // NB: we won't get here if user used a web wallet, as it will redirect to the wallet
+        // <-------- EXTENSION WALLET HANDLING -------->
+        pollForDonationSuccess(successArgs);
+      });
+    } else {
+      transactions.push({
+        contractName: isPotDonation ? potId : DONATION_CONTRACT_ID,
+        methodName: "donate",
+        args,
+        deposit: donationAmountIndivisible.toFixed(0),
+        gas: "300000000000000",
+      });
+      Near.call(transactions);
+      // NB: we won't get here if user used a web wallet, as it will redirect to the wallet
+      // <-------- EXTENSION WALLET HANDLING -------->
+      pollForDonationSuccess(successArgs);
+    }
+  };
+
+  return (
+    <Container>
+      <div>
+        <Label>Total amount</Label>
+        <Amout>
+          <div>
+            {selectedDenomination.icon ? <img src={selectedDenomination.icon} /> : <NearIcon />}
+          </div>
+          <div>
+            {amount} <span>{selectedDenomination.text}</span>
+          </div>
+          {nearToUsd && <div className="usd-amount">~${(nearToUsd * amount).toFixed(2)}</div>}
+        </Amout>
+      </div>
+      <div>
+        <Widget
+          src={`${ownerId}/widget/Cart.BreakdownSummary`}
+          props={{
+            ...props,
+            referrerId,
+            protocolFeeBasisPoints,
+            referralFeeBasisPoints,
+            bypassChefFee,
+            chef: potDetail?.chef,
+            chefFeeBasisPoints,
+            totalAmount: amount,
+            bypassProtocolFee: bypassProtocolFee,
+            ftIcon: selectedDenomination.icon,
+          }}
+        />
+      </div>
+      <FeesRemoval>
+        <div className="check">
+          <CheckBox
+            id="bypassProtocolFeeSelector"
+            checked={bypassProtocolFee}
+            onClick={(e) => {
+              updateState({ bypassProtocolFee: e.target.checked });
+            }}
+          />
+
+          <div className="label">Remove {protocolFeeBasisPoints / 100 || "-"}% protocol fee</div>
+          <a
+            href={`https://near.social/mob.near/widget/ProfilePage?accountId=${protocolFeeRecipientAccount}`}
+            className="address"
+            target="_blank"
+          >
+            <ProfileImg accountId={protocolFeeRecipientAccount} />
+
+            {protocolFeeRecipientAccount}
+          </a>
+        </div>
+        {potDetail?.chef && chefFeeBasisPoints > 0 && (
+          <div className="check">
+            <CheckBox
+              id="bypassChefFeeSelector"
+              checked={bypassChefFee}
+              onClick={(e) => {
+                updateState({ bypassChefFee: e.target.checked });
+              }}
+            />
+
+            <div className="label"> Remove {chefFeeBasisPoints / 100 || "-"}% chef fee</div>
+            <a
+              href={`https://near.social/mob.near/widget/ProfilePage?accountId=${potDetail?.chef}`}
+              className="address"
+              target="_blank"
+            >
+              <ProfileImg accountId={potDetail?.chef} />
+
+              {potDetail?.chef}
+            </a>
+          </div>
+        )}
+      </FeesRemoval>
+
+      {addNote ? (
+        <Widget
+          src={`${ownerId}/widget/Inputs.TextArea`}
+          props={{
+            label: "Note",
+            inputRows: 2,
+            inputStyle: {
+              background: "#FAFAFA",
+            },
+            placeholder: `Add an optional note for the project (max ${MAX_NOTE_LENGTH} characters)`,
+            value: donationNote,
+            onChange: (donationNote) => updateState({ donationNote }),
+            validate: () => {
+              if (donationNote.length > MAX_NOTE_LENGTH) {
+                updateState({
+                  donationNoteError: `Note must be less than ${MAX_NOTE_LENGTH} characters`,
+                });
+                return;
+              }
+              updateState({ donationNoteError: "" });
+            },
+            error: donationNoteError,
+          }}
+        />
+      ) : (
+        <NoteWrapper onClick={() => updateState({ addNote: true })}>
+          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M0.249054 13.7509H3.06155L11.3566 5.4559L8.54405 2.6434L0.249054 10.9384V13.7509ZM1.74905 11.5609L8.54405 4.7659L9.23405 5.4559L2.43905 12.2509H1.74905V11.5609Z"
+              fill="#7B7B7B"
+            />
+            <path
+              d="M11.7766 0.468398C11.4841 0.175898 11.0116 0.175898 10.7191 0.468398L9.34655 1.8409L12.1591 4.6534L13.5316 3.2809C13.8241 2.9884 13.8241 2.5159 13.5316 2.2234L11.7766 0.468398Z"
+              fill="#7B7B7B"
+            />
+          </svg>
+
+          <div>Add Note</div>
+        </NoteWrapper>
+      )}
+      <Button>
+        <Widget
+          src={`${ownerId}/widget/Components.Button`}
+          props={{
+            type: "primary",
+            text: "Confirm donation",
+            onClick: handleDonate,
+          }}
+        />
+      </Button>
+    </Container>
+  );
+};
+
+return {
+  ConfirmDirect,
+};
diff --git a/apps/potlock/widget/ModalDonation/ConfirmPot.jsx b/apps/potlock/widget/ModalDonation/ConfirmPot.jsx
new file mode 100644
index 00000000..7b5a5e1e
--- /dev/null
+++ b/apps/potlock/widget/ModalDonation/ConfirmPot.jsx
@@ -0,0 +1,501 @@
+const { ownerId, NADABOT_HUMAN_METHOD, DONATION_CONTRACT_ID } = VM.require(
+  "potlock.near/widget/constants"
+) || {
+  ownerId: "",
+  NADABOT_HUMAN_METHOD: "",
+  DONATION_CONTRACT_ID: "",
+};
+
+const { nearToUsd } = VM.require("potlock.near/widget/utils");
+
+let DonateSDK =
+  VM.require("potlock.near/widget/SDK.donate") ||
+  (() => ({
+    getConfig: () => {},
+    asyncGetDonationsForDonor: () => {},
+  }));
+DonateSDK = DonateSDK({ env: props.env });
+
+const PotSDK = VM.require("potlock.near/widget/SDK.pot") || {
+  getConfig: () => {},
+  asyncGetDonationsForDonor: () => {},
+};
+const { _address } = VM.require(`potlock.near/widget/Components.DonorsUtils`) || {
+  _address: (address) => address,
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 2rem;
+  gap: 1.5rem;
+  @media only screen and (max-width: 480px) {
+    padding: 1.5rem 1.125rem;
+  }
+`;
+
+const ContentScrollable = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  overflow-y: scroll;
+  height: 450px;
+`;
+
+const Label = styled.div`
+  font-weight: 500;
+  margin-bottom: 4px;
+`;
+const Amout = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  span {
+    font-weight: 600;
+  }
+  div {
+    font-weight: 600;
+    font-size: 1rem;
+  }
+  .usd-amount {
+    color: #7b7b7b;
+  }
+  .toggle-icon {
+    width: 8px;
+    display: flex;
+    margin-left: auto;
+    overflow: hidden;
+    svg {
+      width: 100%;
+      transition: all 300ms ease-in-out;
+    }
+  }
+  img,
+  svg {
+    width: 20px;
+  }
+`;
+
+const SvgIcon = styled.svg`
+  width: 16px;
+`;
+
+const FeesRemoval = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  .check {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .label {
+    margin-right: 4px;
+    margin-left: 8px;
+  }
+  .address {
+    font-weight: 600;
+    gap: 4px;
+    display: flex;
+    align-items: center;
+    color: #292929;
+    transition: all 300ms;
+    &:hover {
+      color: #dd3345;
+      text-decoration: none;
+    }
+  }
+  .profile-image {
+    width: 17px;
+    height: 17px;
+    display: flex !important;
+  }
+  @media only screen and (max-width: 480px) {
+    .address {
+      margin-left: 34px;
+      width: 100%;
+    }
+  }
+`;
+
+const Button = styled.div`
+  display: flex;
+  margin-top: 4rem;
+  margin-bottom: 0.5rem;
+  button {
+    padding: 12px 16px;
+    width: 100%;
+    font-weight: 500;
+  }
+  @media only screen and (max-width: 480px) {
+    margin-top: 2rem;
+  }
+`;
+
+const Projects = styled.div`
+  padding: 8px 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  border: 1px solid #ebebeb;
+  background: rgba(235, 235, 235, 0.24);
+  transition: all 300ms ease-in-out;
+  &.hidden {
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+  }
+  .project {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem 1rem;
+    transition: 300ms ease-in-out;
+  }
+  .profile-image {
+    width: 40px;
+    height: 40px;
+    box-shadow: 0px 0px 1px 0px #a6a6a6 inset;
+    border-radius: 50%;
+  }
+  .info {
+    display: flex;
+    flex-direction: column;
+    .name {
+      font-weight: 600;
+    }
+    .address {
+      color: #7b7b7b;
+      transition: all 300ms;
+      &:hover {
+        text-decoration: none;
+        color: #dd3345;
+      }
+    }
+  }
+`;
+
+const ProjectAmount = styled.div`
+  margin-left: auto;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  div {
+    font-weight: 600;
+  }
+  svg {
+    width: 16px;
+  }
+`;
+
+const NearIcon = (props) => (
+  <SvgIcon {...props} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_454_78)">
+      <circle cx="8" cy="8" r="7.25" stroke="#292929" stroke-width="1.5" />
+      <path
+        d="M11.1477 4C10.851 4 10.5763 4.15333 10.421 4.406L8.74866 6.88867C8.72453 6.92441 8.71422 6.96772 8.71967 7.01051C8.72511 7.05329 8.74594 7.09264 8.77826 7.1212C8.81057 7.14976 8.85218 7.1656 8.89531 7.16574C8.93844 7.16589 8.98015 7.15034 9.01266 7.122L10.6587 5.69467C10.6683 5.68598 10.6802 5.68028 10.6931 5.67828C10.7059 5.67628 10.719 5.67806 10.7308 5.6834C10.7426 5.68875 10.7526 5.69742 10.7596 5.70836C10.7665 5.7193 10.7702 5.73203 10.77 5.745V10.215C10.77 10.2287 10.7658 10.2421 10.7579 10.2534C10.7501 10.2646 10.7389 10.2732 10.726 10.2778C10.7131 10.2825 10.6991 10.2831 10.6858 10.2795C10.6726 10.2758 10.6608 10.2682 10.652 10.2577L5.67667 4.30167C5.59667 4.20709 5.49701 4.1311 5.38463 4.079C5.27226 4.0269 5.14987 3.99994 5.026 4H4.85233C4.62628 4 4.40949 4.0898 4.24964 4.24964C4.0898 4.40949 4 4.62628 4 4.85233V11.1477C4 11.3333 4.06061 11.5139 4.17263 11.6619C4.28465 11.81 4.44194 11.9174 4.6206 11.9679C4.79926 12.0184 4.98952 12.0091 5.16245 11.9416C5.33538 11.874 5.48152 11.7519 5.57867 11.5937L7.251 9.111C7.27513 9.07525 7.28544 9.03194 7.27999 8.98916C7.27455 8.94637 7.25372 8.90703 7.22141 8.87846C7.18909 8.8499 7.14748 8.83407 7.10435 8.83392C7.06122 8.83377 7.01951 8.84932 6.987 8.87766L5.341 10.3053C5.33134 10.3139 5.31939 10.3195 5.3066 10.3215C5.29381 10.3234 5.28074 10.3216 5.26898 10.3162C5.25721 10.3108 5.24726 10.3021 5.24034 10.2912C5.23342 10.2803 5.22983 10.2676 5.23 10.2547V5.784C5.22997 5.77027 5.23418 5.75687 5.24206 5.74563C5.24993 5.73438 5.26109 5.72584 5.274 5.72117C5.28691 5.71651 5.30094 5.71594 5.31419 5.71955C5.32743 5.72315 5.33924 5.73076 5.348 5.74133L10.3227 11.698C10.4847 11.8893 10.7227 11.9997 10.9733 12H11.147C11.373 12.0001 11.5898 11.9104 11.7498 11.7507C11.9097 11.591 11.9997 11.3744 12 11.1483V4.85233C11.9999 4.62631 11.9101 4.40956 11.7503 4.24974C11.5904 4.08992 11.3737 4.00009 11.1477 4Z"
+        fill="#292929"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_454_78">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </SvgIcon>
+);
+
+const ProfileImg = ({ accountId, profile }) => (
+  <Widget
+    src={`${ownerId}/widget/Project.ProfileImage`}
+    props={{
+      accountId,
+      profile,
+      style: {},
+    }}
+  />
+);
+
+const CheckBox = ({ id, checked, onClick }) => (
+  <Widget
+    src={`${ownerId}/widget/Inputs.Checkbox`}
+    props={{
+      id,
+      checked,
+      onClick,
+    }}
+  />
+);
+
+const getFeesBasisPoints = (protocolConfig, potDetail) => {
+  if (protocolConfig) {
+    return [
+      protocolConfig.account_id,
+      protocolConfig.basis_points,
+      potDetail.referral_fee_public_round_basis_points,
+    ];
+  } else {
+    return ["", 0, 0];
+  }
+};
+
+const pollForDonationSuccess = ({
+  projectIds,
+  afterTs,
+  accountId,
+  openDonationSuccessModal,
+  potId,
+}) => {
+  // poll for updates
+  const pollIntervalMs = 1000;
+  // const totalPollTimeMs = 60000; // consider adding in to make sure interval doesn't run indefinitely
+  const pollId = setInterval(() => {
+    PotSDK.asyncGetDonationsForDonor(potId, accountId)
+      .then((alldonations) => {
+        const donations = {};
+        for (const donation of alldonations) {
+          const { project_id, donated_at_ms, donated_at } = donation;
+          if (projectIds.includes(project_id) && (donated_at_ms || donated_at) > afterTs) {
+            donations[project_id] = donation;
+          }
+        }
+        if (Object.keys(donations).length === projectIds.length) {
+          // display success message
+          clearInterval(pollId);
+          openDonationSuccessModal(donations);
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, pollIntervalMs);
+};
+
+const ConfirmPot = (props) => {
+  const {
+    selectedDenomination,
+    bypassProtocolFee,
+    bypassChefFee,
+    updateState,
+    potDetail,
+    potId,
+    referrerId,
+    accountId,
+    amount,
+    openDonationSuccessModal,
+    selectedProjects,
+    donationType,
+    hrefWithParams,
+    toggleAmount,
+  } = props;
+
+  const protocolConfigContractId = potDetail.protocol_config_provider.split(":")[0];
+  const protocolConfigViewMethodName = potDetail.protocol_config_provider.split(":")[1];
+  const protocolConfig =
+    protocolConfigContractId && protocolConfigViewMethodName
+      ? Near.view(protocolConfigContractId, protocolConfigViewMethodName, {})
+      : null;
+
+  const [protocolFeeRecipientAccount, protocolFeeBasisPoints, referralFeeBasisPoints] =
+    getFeesBasisPoints(protocolConfig, potDetail);
+
+  const chefFeeBasisPoints = potDetail?.chef_fee_basis_points;
+
+  const donationAmountIndivisible = (num) =>
+    Big(num).mul(new Big(10).pow(selectedDenomination.decimals));
+
+  const projectAmount = parseFloat(amount) / Object.keys(selectedProjects).length;
+
+  const autoProjectAmount = donationAmountIndivisible(projectAmount);
+
+  const handleDonate = () => {
+    const now = Date.now();
+
+    const successArgs = {
+      projectIds: Object.keys(selectedProjects),
+      afterTs: now,
+      accountId,
+      openDonationSuccessModal,
+      amount,
+      potId,
+    };
+
+    const transactions = [];
+
+    Object.keys(selectedProjects).forEach((project) => {
+      let amount = 0;
+      if (donationType === "auto") {
+        amount = autoProjectAmount;
+      } else {
+        amount = donationAmountIndivisible(selectedProjects[project]);
+      }
+
+      if (amount) {
+        transactions.push({
+          contractName: potId,
+          methodName: "donate",
+          args: {
+            referrer_id: referrerId,
+            project_id: project,
+            bypass_protocol_fee: bypassProtocolFee,
+            ...(bypassChefFee ? { custom_chef_fee_basis_points: 0 } : {}),
+          },
+          deposit: amount.toFixed(0),
+          gas: "300000000000000",
+        });
+      }
+    });
+
+    Near.call(transactions);
+
+    pollForDonationSuccess(successArgs);
+  };
+
+  return (
+    <Container>
+      <ContentScrollable>
+        <div>
+          <Label>Total amount</Label>
+          <Amout
+            onClick={() =>
+              updateState({
+                toggleAmount: !toggleAmount,
+              })
+            }
+          >
+            <div>
+              {selectedDenomination.icon ? <img src={selectedDenomination.icon} /> : <NearIcon />}
+            </div>
+            <div>
+              {amount} <span>{selectedDenomination.text}</span>
+            </div>
+            {nearToUsd && <div className="usd-amount">~${(nearToUsd * amount).toFixed(2)}</div>}
+            <div className="toggle-icon">
+              <svg
+                viewBox="0 0 8 12"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                style={{
+                  rotate: !toggleAmount ? "" : "90deg",
+                }}
+              >
+                <path
+                  d="M1.70501 0L0.295013 1.41L4.87501 6L0.295013 10.59L1.70501 12L7.70501 6L1.70501 0Z"
+                  fill="#7B7B7B"
+                />
+              </svg>
+            </div>
+          </Amout>
+        </div>
+        <Projects className={`${!toggleAmount ? "hidden" : ""}`}>
+          {Object.keys(selectedProjects).map((project_id) => {
+            const profile = Social.getr(`${project_id}/profile`);
+
+            return selectedProjects[project_id] > 0 || donationType === "auto" ? (
+              <div className={`project`} key={project_id}>
+                <ProfileImg profile={profile} />
+                <div className="info">
+                  {profile?.name && <div className="name">{_address(profile?.name, 20)}</div>}
+                  <a
+                    className="address"
+                    href={hrefWithParams(`?tab=project&projectId=${project_id}`)}
+                    target="_blank"
+                  >
+                    {_address(project_id, 20)}
+                  </a>
+                </div>
+                <ProjectAmount>
+                  <div>
+                    {" "}
+                    {donationType === "auto"
+                      ? projectAmount < 0.01
+                        ? "<0.01"
+                        : projectAmount.toFixed(2)
+                      : selectedProjects[project_id]}{" "}
+                  </div>
+                  <NearIcon />
+                </ProjectAmount>
+              </div>
+            ) : (
+              ""
+            );
+          })}
+        </Projects>
+        <Widget
+          src={`${ownerId}/widget/Cart.BreakdownSummary`}
+          props={{
+            ...props,
+            referrerId,
+            protocolFeeBasisPoints,
+            referralFeeBasisPoints,
+            bypassChefFee,
+            chef: potDetail?.chef,
+            chefFeeBasisPoints,
+            totalAmount: amount,
+            bypassProtocolFee: bypassProtocolFee,
+            ftIcon: selectedDenomination.icon,
+          }}
+        />
+        <FeesRemoval>
+          <div className="check">
+            <CheckBox
+              id="bypassProtocolFeeSelector"
+              checked={bypassProtocolFee}
+              onClick={(e) => {
+                updateState({ bypassProtocolFee: e.target.checked });
+              }}
+            />
+
+            <div className="label">Remove {protocolFeeBasisPoints / 100 || "-"}% protocol fee</div>
+            <a
+              href={`https://near.social/mob.near/widget/ProfilePage?accountId=${protocolFeeRecipientAccount}`}
+              className="address"
+              target="_blank"
+            >
+              <ProfileImg accountId={protocolFeeRecipientAccount} />
+
+              {protocolFeeRecipientAccount}
+            </a>
+          </div>
+          {potDetail?.chef && chefFeeBasisPoints > 0 && (
+            <div className="check">
+              <CheckBox
+                id="bypassChefFeeSelector"
+                checked={bypassChefFee}
+                onClick={(e) => {
+                  updateState({ bypassChefFee: e.target.checked });
+                }}
+              />
+
+              <div className="label"> Remove {chefFeeBasisPoints / 100 || "-"}% chef fee</div>
+              <a
+                href={`https://near.social/mob.near/widget/ProfilePage?accountId=${potDetail?.chef}`}
+                className="address"
+                target="_blank"
+              >
+                <ProfileImg accountId={potDetail?.chef} />
+
+                {potDetail?.chef}
+              </a>
+            </div>
+          )}
+        </FeesRemoval>
+      </ContentScrollable>
+      <Button>
+        <Widget
+          src={`${ownerId}/widget/Components.Button`}
+          props={{
+            type: "primary",
+            text: "Confirm donation",
+            onClick: handleDonate,
+          }}
+        />
+      </Button>
+    </Container>
+  );
+};
+
+return {
+  ConfirmPot,
+};
diff --git a/apps/potlock/widget/ModalDonation/Form.jsx b/apps/potlock/widget/ModalDonation/Form.jsx
new file mode 100644
index 00000000..9e1131f5
--- /dev/null
+++ b/apps/potlock/widget/ModalDonation/Form.jsx
@@ -0,0 +1,248 @@
+const { ownerId, NADABOT_HUMAN_METHOD } = VM.require("potlock.near/widget/constants") || {
+  ownerId: "",
+  NADABOT_HUMAN_METHOD: "",
+};
+
+const { AmountInput } = VM.require(`potlock.near/widget/ModalDonation.AmountInput`) || {
+  AmountInput: () => {},
+};
+const { Checks } = VM.require(`potlock.near/widget/ModalDonation.Checks`) || {
+  CheckBox: () => {},
+};
+const { Nadabot, Alert } = VM.require(`potlock.near/widget/ModalDonation.Banners`) || {
+  CheckBox: () => {},
+};
+
+const PotSDK = VM.require("potlock.near/widget/SDK.pot") || {
+  getConfig: () => {},
+};
+
+const Form = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 2rem;
+  @media only screen and (max-width: 480px) {
+    padding: 1.5rem 1.125rem;
+  }
+`;
+
+const Label = styled.div`
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+`;
+
+const Button = styled.div`
+  display: flex;
+  margin-top: 4rem;
+  margin-bottom: 0.5rem;
+  button {
+    padding: 12px 16px;
+    width: 100%;
+    font-weight: 500;
+  }
+  @media only screen and (max-width: 480px) {
+    margin-top: 2rem;
+  }
+`;
+
+const CurrentBalance = styled.div`
+  display: flex;
+  margin-top: 0.5rem;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  .amount-alert {
+    color: #e54141;
+  }
+  .balance {
+    display: flex;
+    gap: 0.5rem;
+    div:last-of-type {
+      color: #7b7b7b;
+    }
+  }
+`;
+
+const PotWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 1.5rem;
+`;
+
+const PotSelector = styled.div`
+  display: flex;
+  > div:last-of-type {
+    width: 100%;
+  }
+`;
+
+const Pot = styled.div`
+  border-radius: 6px;
+  border: 1px solid #dbdbdb;
+  border-bottom-width: 2px;
+  background: #fff;
+  padding: 0.75rem 1rem;
+`;
+
+const SelectPot = ({ selectedRound, activeRoundsOptions, updateState }) => (
+  <PotSelector>
+    <Widget
+      src={`${ownerId}/widget/Inputs.Dropdown`}
+      props={{
+        sortVal: activeRoundsOptions ? activeRoundsOptions[selectedRound].label : "",
+        showCount: false,
+        sortList: Object.values(activeRoundsOptions),
+        buttonStyle: {
+          border: "1px solid #dbdbdb",
+          padding: "0.75rem 1rem",
+          borderBottomWidth: "2px",
+          borderRadius: "6px",
+          justifyContent: "space-between",
+        },
+        menuStyle: {
+          top: "120%",
+        },
+        FilterMenuCustomStyle: `left:0; right:auto;`,
+        handleSortChange: ({ val }) => {
+          updateState({
+            selectedRound: val,
+          });
+        },
+      }}
+    />
+  </PotSelector>
+);
+
+const FormDirect = (props) => {
+  const {
+    projectId,
+    profile,
+    amount,
+    amountError,
+    denominationOptions,
+    updateState,
+    selectedDenomination,
+    donationType,
+    ftBalance,
+    activeRounds,
+    NADABOT_CONTRACT_ID,
+    accountId,
+  } = props;
+
+  const isUserHumanVerified = Near.view(NADABOT_CONTRACT_ID, NADABOT_HUMAN_METHOD, {
+    account_id: accountId,
+  });
+
+  const needsToVerify = isUserHumanVerified === false && donationType === "pot";
+
+  const donationTypes = [
+    {
+      label: "Direct donation",
+      val: "direct",
+      disabled: false,
+    },
+    {
+      label: "Quadratically matched donation",
+      val: "pot",
+      disabled: !activeRounds || activeRounds.length === 0,
+      disabledText: "(no pots available)",
+    },
+  ];
+
+  const activeRoundsOptions = {};
+
+  (activeRounds || []).forEach((round) => {
+    activeRoundsOptions[round] = {
+      label: PotSDK.getConfig(round)?.pot_name || round,
+      val: round,
+    };
+  });
+
+  const isFtDonation = selectedDenomination.text !== "NEAR";
+
+  const HandleAmoutChange = (amount) => {
+    amount = amount.replace(/[^\d.]/g, ""); // remove all non-numeric characters except for decimal
+    if (amount === ".") amount = "0.";
+    updateState({ amount, amountError: "" });
+    // error if amount is greater than balance
+    if (amount > ftBalance && ftBalance !== null) {
+      updateState({ amountError: "You don’t have enough balance to complete this transaction." });
+    } else if (!isFtDonation && parseFloat(amount) < 0.1) {
+      updateState({ amountError: "Minimum donation is 0.1 NEAR" });
+    }
+  };
+
+  const isLoading = isUserHumanVerified === null || activeRounds === null;
+
+  return projectId ? (
+    profile === null ? (
+      <Widget src={`${ownerId}/widget/Components.Loading`} />
+    ) : (
+      <Form>
+        <Label>How do you want to donate?</Label>
+        <Checks
+          options={donationTypes}
+          value={donationType}
+          onClick={(val) =>
+            updateState({
+              donationType: val,
+            })
+          }
+        />
+        {donationType === "pot" && (
+          <PotWrapper>
+            <Label>Select Pot</Label>
+            <SelectPot {...props} activeRoundsOptions={activeRoundsOptions} />
+          </PotWrapper>
+        )}
+        <Label
+          style={{
+            marginTop: "1.5rem",
+          }}
+        >
+          Amount
+        </Label>
+        {!needsToVerify && (
+          <AmountInput
+            value={amount}
+            donationType={donationType}
+            HandleAmoutChange={HandleAmoutChange}
+            updateState={updateState}
+            denominationOptions={denominationOptions}
+            selectedDenomination={selectedDenomination}
+          />
+        )}
+
+        {ftBalance && (
+          <CurrentBalance>
+            <div className="balance">
+              <div>
+                {ftBalance} <span> {selectedDenomination.text} </span>
+              </div>
+              <div>available</div>
+            </div>
+          </CurrentBalance>
+        )}
+        {amountError && <Alert error={amountError} />}
+        {needsToVerify && <Nadabot />}
+        <Button>
+          <Widget
+            src={`${ownerId}/widget/Components.Button`}
+            props={{
+              type: "primary",
+              disabled: amountError || needsToVerify || !amount,
+              text: isLoading ? "Loading..." : "Proceed to donate",
+              onClick: () => updateState({ currentPage: "confirm" }),
+            }}
+          />
+        </Button>
+      </Form>
+    )
+  ) : (
+    ""
+  );
+};
+
+return {
+  FormDirect,
+};
diff --git a/apps/potlock/widget/ModalDonation/FormPot.jsx b/apps/potlock/widget/ModalDonation/FormPot.jsx
new file mode 100644
index 00000000..af379560
--- /dev/null
+++ b/apps/potlock/widget/ModalDonation/FormPot.jsx
@@ -0,0 +1,452 @@
+const { ownerId, NADABOT_HUMAN_METHOD } = VM.require("potlock.near/widget/constants") || {
+  ownerId: "",
+  NADABOT_HUMAN_METHOD: "",
+};
+
+const { nearToUsd } = VM.require("potlock.near/widget/utils");
+
+const { Checks } = VM.require(`potlock.near/widget/ModalDonation.Checks`) || {
+  CheckBox: () => {},
+};
+
+const { AmountInput } = VM.require(`potlock.near/widget/ModalDonation.AmountInput`) || {
+  AmountInput: () => {},
+};
+
+const { _address } = VM.require(`potlock.near/widget/Components.DonorsUtils`) || {
+  _address: (address) => address,
+};
+
+const { Alert } = VM.require(`potlock.near/widget/ModalDonation.Banners`) || {
+  CheckBox: () => {},
+};
+
+const Form = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 0;
+`;
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 2rem;
+  @media only screen and (max-width: 480px) {
+    padding: 0 1.125rem;
+  }
+`;
+const Label = styled.div`
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+`;
+
+const CurrentBalance = styled.div`
+  display: flex;
+  margin-top: 0.5rem;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  .amount-alert {
+    color: #e54141;
+  }
+  .balance {
+    display: flex;
+    gap: 0.5rem;
+    div:last-of-type {
+      color: #7b7b7b;
+    }
+  }
+`;
+
+const TotalAmount = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin-left: auto;
+  .label {
+    color: #7b7b7b;
+  }
+  .amount {
+    font-weight: 600;
+    .usd {
+      color: #7b7b7b;
+    }
+  }
+  @media only screen and (max-width: 480px) {
+    width: 100%;
+    justify-content: space-between;
+  }
+`;
+
+const Projects = styled.div`
+  padding: 8px 0;
+  border-top: 1px solid #ebebeb;
+  margin-top: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  height: 238px;
+  overflow-y: scroll;
+  .project {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    cursor: pointer;
+    padding: 0.5rem 2rem;
+    transition: 300ms ease-in-out;
+    &:hover,
+    &.selected {
+      background: rgba(235, 235, 235, 0.24);
+      .check {
+        border-color: #dd3345;
+        svg {
+          display: block;
+        }
+      }
+    }
+  }
+  .profile-image {
+    width: 40px;
+    height: 40px;
+    box-shadow: 0px 0px 1px 0px #a6a6a6 inset;
+    border-radius: 50%;
+  }
+  .info {
+    display: flex;
+    flex-direction: column;
+    .name {
+      font-weight: 600;
+    }
+    .address {
+      color: #7b7b7b;
+      transition: all 300ms;
+      &:hover {
+        text-decoration: none;
+        color: #dd3345;
+      }
+    }
+  }
+  .check {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: 2px solid #c7c7c7;
+    border-radius: 50%;
+    svg {
+      display: none;
+      width: 12px;
+    }
+    &.selected {
+      border-color: #dd3345;
+      svg {
+        display: block;
+      }
+    }
+  }
+  @media only screen and (max-width: 480px) {
+    .project {
+      padding: 0.5rem 1.125rem;
+    }
+  }
+`;
+
+const ProjectAmount = styled.div`
+  margin-left: auto;
+  position: relative;
+  display: flex;
+  border-radius: 6px;
+  background: rgb(246, 245, 243);
+  box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px, rgba(41, 41, 41, 0.1) 0px 0px 4px 0px,
+    rgba(41, 41, 41, 0.1) 0px 2px 4px -1px inset, rgba(41, 41, 41, 0.1) 0px 8px 16px -4px inset;
+  input {
+    padding: 10px 16px;
+    padding-right: 46px;
+    text-align: right;
+    width: 120px;
+    background: transparent;
+    border: none;
+  }
+  svg {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 1rem;
+    width: 16px;
+  }
+`;
+
+const Button = styled.div`
+  display: flex;
+  margin-top: 4rem;
+  margin-bottom: 0.5rem;
+  padding: 0 2rem;
+  button {
+    padding: 12px 16px;
+    width: 100%;
+    font-weight: 500;
+  }
+  @media only screen and (max-width: 480px) {
+    margin-top: 2rem;
+  }
+`;
+
+const ProfileImg = ({ profile }) => (
+  <Widget
+    src={`${ownerId}/widget/Project.ProfileImage`}
+    props={{
+      profile,
+      style: {},
+    }}
+  />
+);
+
+const donationTypes = [
+  {
+    label: "Auto",
+    info: "(allocate funds evenly across multiple projects)",
+    val: "auto",
+    disabled: false,
+  },
+  {
+    label: "Manual",
+    info: "(manually specify amount for each project)",
+    val: "manual",
+    disabled: false,
+  },
+];
+
+const isEmpty = (obj) => {
+  return Object.keys(obj).length === 0;
+};
+
+const FormPot = (props) => {
+  const {
+    amount,
+    amountError,
+    DENOMINATION_OPTION,
+    updateState,
+    selectedDenomination,
+    donationType,
+    ftBalance,
+    hrefWithParams,
+    selectedProjects,
+  } = props;
+
+  const projects = props.projects ?? [];
+  const projectHegiht = 58;
+  const projectsContaienrHegiht = projects.length > 4 ? 234 : projectHegiht * projects.length;
+
+  const HandleAmoutChange = (amount) => {
+    amount = amount.replace(/[^\d.]/g, ""); // remove all non-numeric characters except for decimal
+    if (amount === ".") amount = "0.";
+    updateState({ amount, amountError: "" });
+    // error if amount is greater than balance
+    if (amount > ftBalance) {
+      updateState({ amountError: "You don’t have enough balance to complete this transaction." });
+    } else if (parseFloat(amount) < 0.1) {
+      updateState({ amountError: "Minimum donation is 0.1 NEAR" });
+    }
+  };
+
+  const handleAddProject = (project) => {
+    const updatedProjects = selectedProjects;
+    if (selectedProjects[project] === "") {
+      delete updatedProjects[project];
+    } else {
+      updatedProjects[project] = "";
+    }
+
+    updateState({
+      selectedProjects: updatedProjects,
+    });
+  };
+
+  const totalAmountAllocated = 0;
+  Object.values(selectedProjects).forEach(
+    (amount) => (totalAmountAllocated += parseFloat(amount || 0))
+  );
+  totalAmountAllocated = totalAmountAllocated.toFixed(1);
+
+  const handleProjectAmount = (project, amount) => {
+    amount = amount.replace(/[^\d.]/g, ""); // remove all non-numeric characters except for decimal
+    if (amount === ".") amount = "0.";
+
+    const updatedProjects = selectedProjects;
+    updatedProjects[project] = amount;
+
+    const totalAmount = 0;
+    Object.values(updatedProjects).forEach((amount) => (totalAmount += parseFloat(amount)));
+
+    if (totalAmount > ftBalance && ftBalance !== null) {
+      updateState({ amountError: "You don’t have enough balance to complete this transaction." });
+    } else if (parseFloat(amount) < 0.1 && parseFloat(amount) !== 0) {
+      updateState({ amountError: "Minimum donation is 0.1 NEAR" });
+    } else {
+      updateState({ amountError: "" });
+    }
+
+    updateState({
+      selectedProjects: updatedProjects,
+    });
+  };
+
+  return (
+    <Form>
+      <Content>
+        <Label>How do you want to allocate funds?</Label>
+        <Checks
+          options={donationTypes}
+          value={donationType}
+          onClick={(val) => {
+            console.log("donationType", val);
+
+            updateState({
+              selectedProjects: {},
+              donationType: val,
+            });
+          }}
+        />
+        {donationType === "auto" && (
+          <>
+            <Label
+              style={{
+                marginTop: "1.5rem",
+              }}
+            >
+              Amount
+            </Label>
+            <AmountInput
+              value={amount}
+              donationType={donationType}
+              HandleAmoutChange={HandleAmoutChange}
+              updateState={updateState}
+              denominationOptions={DENOMINATION_OPTION}
+              selectedDenomination={selectedDenomination}
+            />
+          </>
+        )}
+        <CurrentBalance>
+          {ftBalance && (
+            <div className="balance">
+              <div>
+                {ftBalance} <span> {selectedDenomination.text} </span>
+              </div>
+              <div>available</div>
+            </div>
+          )}
+          {donationType === "manual" && (
+            <TotalAmount>
+              <div className="label">Total amount allocated</div>
+              <div className="amount">
+                {totalAmountAllocated}
+
+                <span>NEAR</span>
+
+                {nearToUsd && (
+                  <span className="usd">
+                    ~$
+                    {nearToUsd}
+                  </span>
+                )}
+              </div>
+            </TotalAmount>
+          )}
+        </CurrentBalance>
+        {amountError && <Alert error={amountError} />}
+      </Content>
+      <Projects style={{ height: projectsContaienrHegiht + "px" }}>
+        {projects.map(({ project_id }) => {
+          const profile = Social.getr(`${project_id}/profile`);
+
+          return (
+            <div
+              className={`project ${selectedProjects[project_id] === "" ? "selected" : ""}`}
+              style={{
+                cursor: donationType == "auto" ? "pointer" : "default",
+              }}
+              key={project_id}
+              onClick={() => (donationType == "auto" ? handleAddProject(project_id) : {})}
+            >
+              <ProfileImg profile={profile} />
+              <div className="info">
+                {profile?.name && <div className="name">{_address(profile?.name, 20)}</div>}
+                <a
+                  className="address"
+                  href={hrefWithParams(`?tab=project&projectId=${project_id}`)}
+                  target="_blank"
+                >
+                  {_address(project_id, 20)}
+                </a>
+              </div>
+              {donationType === "manual" ? (
+                <ProjectAmount>
+                  <input
+                    className="amount"
+                    type="text"
+                    placeholder="0.00"
+                    onChange={(e) => handleProjectAmount(project_id, e.target.value)}
+                  />
+                  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g clip-path="url(#clip0_454_78)">
+                      <circle cx="8" cy="8" r="7.25" stroke="#292929" stroke-width="1.5" />
+                      <path
+                        d="M11.1477 4C10.851 4 10.5763 4.15333 10.421 4.406L8.74866 6.88867C8.72453 6.92441 8.71422 6.96772 8.71967 7.01051C8.72511 7.05329 8.74594 7.09264 8.77826 7.1212C8.81057 7.14976 8.85218 7.1656 8.89531 7.16574C8.93844 7.16589 8.98015 7.15034 9.01266 7.122L10.6587 5.69467C10.6683 5.68598 10.6802 5.68028 10.6931 5.67828C10.7059 5.67628 10.719 5.67806 10.7308 5.6834C10.7426 5.68875 10.7526 5.69742 10.7596 5.70836C10.7665 5.7193 10.7702 5.73203 10.77 5.745V10.215C10.77 10.2287 10.7658 10.2421 10.7579 10.2534C10.7501 10.2646 10.7389 10.2732 10.726 10.2778C10.7131 10.2825 10.6991 10.2831 10.6858 10.2795C10.6726 10.2758 10.6608 10.2682 10.652 10.2577L5.67667 4.30167C5.59667 4.20709 5.49701 4.1311 5.38463 4.079C5.27226 4.0269 5.14987 3.99994 5.026 4H4.85233C4.62628 4 4.40949 4.0898 4.24964 4.24964C4.0898 4.40949 4 4.62628 4 4.85233V11.1477C4 11.3333 4.06061 11.5139 4.17263 11.6619C4.28465 11.81 4.44194 11.9174 4.6206 11.9679C4.79926 12.0184 4.98952 12.0091 5.16245 11.9416C5.33538 11.874 5.48152 11.7519 5.57867 11.5937L7.251 9.111C7.27513 9.07525 7.28544 9.03194 7.27999 8.98916C7.27455 8.94637 7.25372 8.90703 7.22141 8.87846C7.18909 8.8499 7.14748 8.83407 7.10435 8.83392C7.06122 8.83377 7.01951 8.84932 6.987 8.87766L5.341 10.3053C5.33134 10.3139 5.31939 10.3195 5.3066 10.3215C5.29381 10.3234 5.28074 10.3216 5.26898 10.3162C5.25721 10.3108 5.24726 10.3021 5.24034 10.2912C5.23342 10.2803 5.22983 10.2676 5.23 10.2547V5.784C5.22997 5.77027 5.23418 5.75687 5.24206 5.74563C5.24993 5.73438 5.26109 5.72584 5.274 5.72117C5.28691 5.71651 5.30094 5.71594 5.31419 5.71955C5.32743 5.72315 5.33924 5.73076 5.348 5.74133L10.3227 11.698C10.4847 11.8893 10.7227 11.9997 10.9733 12H11.147C11.373 12.0001 11.5898 11.9104 11.7498 11.7507C11.9097 11.591 11.9997 11.3744 12 11.1483V4.85233C11.9999 4.62631 11.9101 4.40956 11.7503 4.24974C11.5904 4.08992 11.3737 4.00009 11.1477 4Z"
+                        fill="#292929"
+                      />
+                    </g>
+                    <defs>
+                      <clipPath id="clip0_454_78">
+                        <rect width="16" height="16" fill="white" />
+                      </clipPath>
+                    </defs>
+                  </svg>
+                </ProjectAmount>
+              ) : (
+                <div className="check">
+                  <svg viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g clip-path="url(#clip0_468_92)">
+                      <path d="M1 5.1618L4 8.16197L11.1621 1" stroke="#DD3345" stroke-width="2" />
+                    </g>
+                    <defs>
+                      <clipPath id="clip0_468_92">
+                        <rect width="12" height="10" fill="white" />
+                      </clipPath>
+                    </defs>
+                  </svg>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </Projects>
+      <Button>
+        <Widget
+          src={`${ownerId}/widget/Components.Button`}
+          props={{
+            type: "primary",
+            disabled:
+              isEmpty(selectedProjects) ||
+              (donationType === "auto"
+                ? amountError || parseFloat(amount) === 0 || !amount
+                : totalAmountAllocated > ftBalance ||
+                  amountError ||
+                  parseFloat(totalAmountAllocated) === 0),
+            text: isUserHumanVerified ? "Verify to nadabot" : "Proceed to donate",
+            onClick: () => {
+              if (donationType === "auto") updateState({ currentPage: "confirmPot" });
+              else {
+                updateState({ currentPage: "confirmPot", amount: totalAmountAllocated });
+              }
+            },
+          }}
+        />
+      </Button>
+    </Form>
+  );
+};
+
+return {
+  FormPot,
+};
diff --git a/apps/potlock/widget/ModalDonation/Main.jsx b/apps/potlock/widget/ModalDonation/Main.jsx
new file mode 100644
index 00000000..d5a179b9
--- /dev/null
+++ b/apps/potlock/widget/ModalDonation/Main.jsx
@@ -0,0 +1,455 @@
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  background: #fff;
+  font-size: 14px;
+  box-shadow: 0px 0px 0px 1px rgba(41, 41, 41, 0.1), 0px 8px 12px -4px rgba(41, 41, 41, 0.1),
+    0px 20px 32px -10px rgba(41, 41, 41, 0.1), 0px 32px 44px -16px rgba(41, 41, 41, 0.1);
+  overflow: hidden;
+  border-radius: 6px;
+  @media only screen and (max-width: 480px) {
+    top: 0;
+    border-radius: 0;
+    position: fixed;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow-y: scroll;
+    display: flex;
+    z-index: 1000;
+  }
+`;
+
+const Banner = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 2rem;
+  gap: 0.5rem;
+  overflow: hidden;
+  background: #dd3345;
+  color: white;
+  font-size: 22px;
+  .left-pattern {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 30%;
+    transform: translate(-10%, -10%) scaleX(-1);
+    pointer-events: none;
+  }
+  .right-pattern {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 30%;
+    transform: translate(10%, -10%);
+    pointer-events: none;
+  }
+  @media only screen and (max-width: 480px) {
+    padding: 1.125rem;
+  }
+`;
+
+const BannerBg = (props) => (
+  <svg {...props} viewBox="0 0 145 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect
+      x="157.654"
+      y="-37"
+      width="20"
+      height="161.118"
+      rx="10"
+      transform="rotate(45 157.654 -37)"
+      fill="white"
+      fill-opacity="0.08"
+    />
+    <rect
+      x="189.654"
+      y="-37"
+      width="20"
+      height="245.972"
+      rx="10"
+      transform="rotate(45 189.654 -37)"
+      fill="white"
+      fill-opacity="0.08"
+    />
+    <rect
+      x="221.654"
+      y="-37"
+      width="20"
+      height="164.654"
+      rx="10"
+      transform="rotate(45 221.654 -37)"
+      fill="white"
+      fill-opacity="0.08"
+    />
+    <rect
+      x="125.654"
+      y="-37"
+      width="20"
+      height="177.702"
+      rx="10"
+      transform="rotate(45 125.654 -37)"
+      fill="white"
+      fill-opacity="0.08"
+    />
+    <rect
+      x="93.6543"
+      y="-37"
+      width="20"
+      height="78.4889"
+      rx="10"
+      transform="rotate(45 93.6543 -37)"
+      fill="white"
+      fill-opacity="0.08"
+    />
+  </svg>
+);
+
+const HeaderIcons = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  svg {
+    width: 14px;
+    cursor: pointer;
+    transition: all 300ms ease-in-out;
+  }
+  .close-icon {
+    margin-left: auto;
+    &:hover {
+      rotate: 90deg;
+    }
+  }
+  div {
+    cursor: pointer;
+    display: flex;
+  }
+  .back-arrow:hover svg {
+    transform: translateX(-10px);
+  }
+`;
+
+const DENOMINATION_OPTIONS = [{ text: "NEAR", value: "NEAR", decimals: 24 }];
+
+const { projectId, referrerId, potId, onClose, NADABOT_CONTRACT_ID, POT, multiple, potDetail } =
+  props;
+
+const DEFAULT_DONATION_AMOUNT = "1";
+
+const accountId = context.accountId;
+
+const initialState = {
+  amount: "",
+  donationType: multiple ? "auto" : "direct",
+  showBreakdown: false,
+  bypassProtocolFee: false,
+  bypassChefFee: false,
+  addNote: false,
+  donationNote: "",
+  donationNoteError: "",
+  allPots: null,
+  intervalId: null,
+  ftBalances: null,
+  selectedDenomination: DENOMINATION_OPTIONS[0],
+  denominationOptions: DENOMINATION_OPTIONS,
+  selectedRound: "",
+  currentPage: multiple ? "formPot" : "form",
+  selectedProjects: {},
+  toggleAmount: true,
+};
+
+State.init(initialState);
+
+const {
+  amount,
+  denomination,
+  donationType,
+  showBreakdownm,
+  bypassProtocolFee,
+  bypassChefFee,
+  addNote,
+  donationNote,
+  donationNoteError,
+  allPots,
+  intervalId,
+  nearBalance,
+  ftBalances,
+  denominationOptions,
+  selectedDenomination,
+  selectedRound,
+  currentPage,
+} = state;
+
+const [activeRounds, setActiveRounds] = useState(null);
+
+const profile = Social.getr(`${projectId}/profile`);
+const profileName = profile?.name || projectId;
+
+const MAX_NOTE_LENGTH = 60;
+
+const { ownerId, DONATION_CONTRACT_ID, NADABOT_HUMAN_METHOD, NADA_BOT_URL, SUPPORTED_FTS } =
+  VM.require("potlock.near/widget/constants") || {
+    DONATION_CONTRACT_ID: "",
+    NADABOT_HUMAN_METHOD: "",
+    ownerId: "",
+    NADA_BOT_URL: "",
+    SUPPORTED_FTS: {},
+  };
+
+let ListsSDK =
+  VM.require("potlock.near/widget/SDK.lists") ||
+  (() => ({
+    getRegistrations: () => {},
+  }));
+ListsSDK = ListsSDK({ env: props.env });
+
+let DonateSDK =
+  VM.require("potlock.near/widget/SDK.donate") ||
+  (() => ({
+    getConfig: () => {},
+    asyncGetDonationsForDonor: () => {},
+  }));
+DonateSDK = DonateSDK({ env: props.env });
+
+let PotFactorySDK =
+  VM.require("potlock.near/widget/SDK.potfactory") ||
+  (() => ({
+    getPots: () => {},
+  }));
+
+PotFactorySDK = PotFactorySDK({ env: props.env });
+
+const PotSDK = VM.require("potlock.near/widget/SDK.pot") || {
+  getConfig: () => {},
+  asyncGetConfig: () => {},
+  getApprovedApplications: () => {},
+  asyncGetApplicationByProjectId: () => {},
+  asyncGetDonationsForDonor: () => {},
+  isRoundActive: () => {},
+};
+
+const { nearToUsd, formatWithCommas } = VM.require("potlock.near/widget/utils") || {
+  nearToUsd: 1,
+  formatWithCommas: () => {},
+};
+
+const { addItemsToCart, clearCart } = VM.require("potlock.near/widget/SDK.cart") || {
+  addItemsToCart: () => {},
+  clearCart: () => {},
+};
+
+const { FormDirect } = VM.require("potlock.near/widget/ModalDonation.Form") || {
+  FormDirect: () => {},
+};
+const { FormPot } = VM.require("potlock.near/widget/ModalDonation.FormPot") || {
+  FormPot: () => {},
+};
+const { ConfirmDirect } = VM.require("potlock.near/widget/ModalDonation.ConfirmDirect") || {
+  ConfirmDirect: () => {},
+};
+const { ConfirmPot } = VM.require("potlock.near/widget/ModalDonation.ConfirmPot") || {
+  ConfirmPot: () => {},
+};
+
+const pages = {
+  form: FormDirect,
+  formPot: FormPot,
+  confirm: ConfirmDirect,
+  confirmPot: ConfirmPot,
+};
+
+const ActivePageComponent = pages[currentPage];
+
+// get all active pots
+const pots = useCache(
+  () =>
+    // get all pots
+    PotFactorySDK.asyncGetPots()
+      .then((pots) => {
+        const activePots = pots.map((pot) =>
+          // if active
+          PotSDK.isRoundActive(pot.id)
+            // check if project had applied
+            .then((isActive) => isActive && pot.id)
+            .catch((e) => {
+              console.error("error checking active round for pot: " + pot.id, e);
+            })
+        );
+        return Promise.all(activePots);
+      })
+      .catch((e) => {
+        console.error("error getting pots: ", e);
+      }),
+  "active-pots"
+);
+
+useEffect(() => {
+  if (potId && !activeRounds) {
+    setActiveRounds([potId]);
+    State.update({
+      selectedRound: potId,
+      donationType: multiple ? "auto" : "pot",
+    });
+  } else if (!activeRounds && projectId) {
+    if (!pots) setActiveRounds([]);
+
+    (pots ?? []).forEach((pot, idx) => {
+      if (pot) {
+        PotSDK.asyncGetApplicationByProjectId(pot, projectId)
+          .then((application) => {
+            if (application.status === "Approved") {
+              setActiveRounds((prev) => {
+                const prevRounds = prev || [];
+                if (!prevRounds.includes(pot)) {
+                  return [...prevRounds, pot];
+                }
+              });
+              if (!selectedRound)
+                State.update({
+                  selectedRound: pot,
+                });
+            } else if (pots.length - 1 === idx && !activeRounds) {
+              setActiveRounds((prev) => [...(prev || [])]);
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+            setActiveRounds((prev) => [...(prev || [])]);
+          });
+      }
+    });
+  }
+}, [pots]);
+
+// Get Ft Balances
+useEffect(() => {
+  if (!ftBalances && !potId) {
+    asyncFetch(`https://near-mainnet.api.pagoda.co/eapi/v1/accounts/${accountId}/balances/FT`, {
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": "dce81322-81b0-491d-8880-9cfef4c2b3c2",
+      },
+    })
+      .then((ftBalancesRes) => {
+        if (ftBalancesRes) {
+          const ftBalances = ftBalancesRes.body.balances;
+          State.update({
+            ftBalances: ftBalances,
+            denominationOptions: DENOMINATION_OPTIONS.concat(
+              ftBalances
+                .map(({ amount, contract_account_id, metadata }) => ({
+                  amount,
+                  id: contract_account_id,
+                  text: metadata.symbol,
+                  value: metadata.symbol,
+                  icon: metadata.icon,
+                  decimals: metadata.decimals,
+                }))
+                .filter((option) => option.text.length < 10)
+            ),
+          });
+        }
+      })
+      .catch((err) => console.log("fetching Ft balances faild"));
+  }
+}, [ftBalances]);
+
+const nearBalanceRes = fetch(
+  `https://near-mainnet.api.pagoda.co/eapi/v1/accounts/${accountId}/balances/NEAR`,
+  {
+    headers: {
+      "Content-Type": "application/json",
+      "x-api-key": "dce81322-81b0-491d-8880-9cfef4c2b3c2",
+    },
+  }
+);
+
+const ftBalance = useMemo(() => {
+  if (selectedDenomination.text === "NEAR") {
+    const nearBalance = nearBalanceRes?.body?.balance;
+
+    return nearBalance ? parseFloat(Big(nearBalance.amount).div(Big(10).pow(24)).toFixed(2)) : null;
+  }
+  const balance = denominationOptions.find(
+    // this is where we need the details
+    (option) => option.text === selectedDenomination.text
+  );
+  return balance
+    ? parseFloat(Big(balance.amount).div(Big(10).pow(balance.decimals)).toFixed(2))
+    : null;
+}, [selectedDenomination, ftBalances, nearBalanceRes]);
+
+return (
+  <Widget
+    src={`${ownerId}/widget/Components.Modal`}
+    props={{
+      ...props,
+      onClose: (e) => {
+        e.stopPropagation();
+      },
+      contentStyle: {
+        padding: "0px",
+      },
+      children: (
+        <Container>
+          <div>
+            <Banner>
+              <BannerBg className="left-pattern" />
+              <BannerBg className="right-pattern" />
+              <HeaderIcons>
+                {!["form", "formPot"].includes(currentPage) && (
+                  <div
+                    className="back-arrow"
+                    onClick={() =>
+                      State.update({
+                        currentPage: multiple ? "formPot" : "form",
+                      })
+                    }
+                  >
+                    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M16 7H3.83L9.42 1.41L8 0L0 8L8 16L9.41 14.59L3.83 9H16V7Z"
+                        fill="#FCCFCF"
+                      />
+                    </svg>
+                  </div>
+                )}
+
+                <svg
+                  onClick={() => onClose()}
+                  className="close-icon"
+                  viewBox="0 0 14 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
+                    fill="#FCCFCF"
+                  />
+                </svg>
+              </HeaderIcons>
+              {["confirmPot", "confirm"].includes(currentPage) ? (
+                <div> Confirm donation</div>
+              ) : currentPage === "formPot" ? (
+                <div>Donate to Projects in {potDetail?.pot_name}</div>
+              ) : (
+                <div> Donate to {profileName}</div>
+              )}
+            </Banner>
+          </div>
+          <ActivePageComponent
+            {...props}
+            {...state}
+            accountId={accountId}
+            updateState={State.update}
+            ftBalance={ftBalance}
+            activeRounds={activeRounds}
+            DENOMINATION_OPTION={DENOMINATION_OPTIONS}
+          />
+        </Container>
+      ),
+    }}
+  />
+);
diff --git a/apps/potlock/widget/Pots/Detail.jsx b/apps/potlock/widget/Pots/Detail.jsx
index 5668f4a2..b6b5d7e3 100644
--- a/apps/potlock/widget/Pots/Detail.jsx
+++ b/apps/potlock/widget/Pots/Detail.jsx
@@ -15,6 +15,7 @@ const {
 const PotSDK = VM.require("potlock.near/widget/SDK.pot") || {
   getConfig: () => {},
   asyncGetApplications: () => {},
+  asyncGetPublicRoundDonations: () => {},
 };
 
 const potDetail = PotSDK.getConfig(potId);
@@ -111,8 +112,6 @@ if (state.sybilRequirementMet === null) {
   }
 }
 
-// console.log("state in pot detail: ", state);
-
 const noPot = potDetail === undefined;
 const loading = potDetail === null;
 
@@ -286,6 +285,28 @@ const registrationApprovedOrNoRegistryProvider =
 
 const isError = state.applicationMessageError || state.daoAddressError;
 
+// Get total public donations
+const allDonationsPaginated = useCache(() => {
+  const limit = 480; // number of donations to fetch per req
+  const donationsCount = potDetail.public_donations_count;
+  const paginations = [
+    ...Array(parseInt(donationsCount / limit) + (donationsCount % limit > 0 ? 1 : 0)).keys(),
+  ];
+  try {
+    const allDonations = paginations.map((index) =>
+      PotSDK.asyncGetPublicRoundDonations(potId, {
+        from_index: index * limit,
+        limit: limit,
+      })
+    );
+    return Promise.all(allDonations);
+  } catch (error) {
+    console.error(`error getting public donations from ${index} to ${index * limit}`, error);
+  }
+}, "pot-public-donations");
+
+const allDonations = allDonationsPaginated ? allDonationsPaginated.flat() : null;
+
 return (
   <Wrapper>
     <Widget
@@ -304,6 +325,7 @@ return (
         sybilRequirementMet: state.sybilRequirementMet,
         applicationSuccess: state.applicationSuccess,
         registrationApproved,
+        allDonations,
         registryStatus: state.registryStatus,
       }}
     />
@@ -319,6 +341,7 @@ return (
         props={{
           ...props,
           potDetail: potDetail,
+          allDonations,
           sybilRequirementMet: state.sybilRequirementMet,
         }}
       />
diff --git a/apps/potlock/widget/Pots/Donations.jsx b/apps/potlock/widget/Pots/Donations.jsx
index 0ddc251e..afc62de6 100644
--- a/apps/potlock/widget/Pots/Donations.jsx
+++ b/apps/potlock/widget/Pots/Donations.jsx
@@ -1,6 +1,7 @@
 // get donations
 const {
   potId,
+  allDonations,
   potDetail: { base_currency },
 } = props;
 
@@ -16,10 +17,8 @@ const { getTimePassed, _address } = VM.require(`${ownerId}/widget/Components.Don
 const PotSDK = VM.require("potlock.near/widget/SDK.pot") || {
   getPublicRoundDonations: () => {},
 };
-const publicRoundDonations = PotSDK.getPublicRoundDonations(potId);
 
 State.init({
-  allDonations: null,
   filteredDonations: [],
   currentFilter: "date",
   filter: {
@@ -28,11 +27,11 @@ State.init({
   },
 });
 
-const { allDonations, filteredDonations, currentFilter, filter } = state;
+const { filteredDonations, currentFilter, filter } = state;
 
-if (publicRoundDonations && !allDonations) {
-  publicRoundDonations.reverse();
-  State.update({ filteredDonations: publicRoundDonations, allDonations: publicRoundDonations });
+if (allDonations) {
+  const sortedDonations = [...allDonations].reverse();
+  State.update({ filteredDonations: sortedDonations });
 }
 
 if (!allDonations) return <div class="spinner-border text-secondary" role="status" />;
diff --git a/apps/potlock/widget/Pots/Header.jsx b/apps/potlock/widget/Pots/Header.jsx
index 54638823..933736fd 100644
--- a/apps/potlock/widget/Pots/Header.jsx
+++ b/apps/potlock/widget/Pots/Header.jsx
@@ -8,6 +8,7 @@ const {
   registryStatus,
   hrefWithParams,
   nav,
+  referrerId,
 } = props;
 
 const {
@@ -27,7 +28,10 @@ const {
 } = potDetail;
 
 const [isMatchingPoolModalOpen, setIsMatchingPoolModalOpen] = useState(false);
+const [isModalDonationOpen, setIsModalDonationOpen] = useState(false);
+const [successfulDonation, setSuccessfulDonation] = useState(null);
 const [showChallengePayoutsModal, setShowChallengePayoutsModal] = useState(false);
+const [projects, setProjects] = useState(null);
 
 const { IPFS_BASE_URL } = VM.require("potlock.near/widget/constants") || {
   IPFS_BASE_URL: "",
@@ -42,16 +46,23 @@ const userIsChefOrGreater = userIsAdminOrGreater || chef === context.accountId;
 
 const PotSDK = VM.require("potlock.near/widget/SDK.pot") || {
   getApplicationByProjectId: () => {},
+  asyncGetApprovedApplications: () => {},
   adminProcessPayouts: () => {},
 };
 
 const existingApplication = PotSDK.getApplicationByProjectId(potId, context.accountId);
 
+useEffect(() => {
+  if (!projects) {
+    PotSDK.asyncGetApprovedApplications(potId).then((projects) => {
+      setProjects(projects);
+    });
+  }
+}, []);
 const applicationExists = existingApplication || applicationSuccess;
 
 const now = Date.now();
 const publicRoundOpen = now >= public_round_start_ms && now < public_round_end_ms;
-console.log(potDetail);
 
 const applicationOpen = now >= application_start_ms && now < application_end_ms;
 
@@ -174,6 +185,8 @@ const existingChallengeForUser = (payoutsChallenges || []).find(
   (challenge) => challenge.challenger_id === context.accountId
 );
 
+const canDonate = sybilRequirementMet && projects.length > 0;
+
 return (
   <Container>
     <Header>
@@ -191,17 +204,20 @@ return (
         </div>
       </Fund>
       <ButtonsWrapper>
-        {publicRoundOpen && (nav !== "projects" || !sybilRequirementMet) && context.accountId && (
+        {publicRoundOpen && context.accountId && (
           <Widget
             src={`${ownerId}/widget/Components.Button`}
             props={{
               type: "primary",
-              text: sybilRequirementMet ? "Donate" : "Verify to Donate",
-              href: sybilRequirementMet
-                ? hrefWithParams(`?tab=pot&potId=${potId}&nav=projects`)
-                : NADA_BOT_URL,
-              target: sybilRequirementMet ? "_self" : "_blank",
-              iconSrc: sybilRequirementMet ? null : NADABOT_ICON_URL,
+              text: canDonate ? "Donate" : "Verify to Donate",
+              href: canDonate ? null : NADA_BOT_URL,
+              onClick: canDonate
+                ? () => {
+                    setIsModalDonationOpen(true);
+                  }
+                : null,
+              target: canDonate ? "_self" : "_blank",
+              iconSrc: canDonate ? null : NADABOT_ICON_URL,
             }}
           />
         )}
@@ -282,5 +298,34 @@ return (
         onCancel: () => setShowChallengePayoutsModal(false),
       }}
     />
+    <Widget
+      src={`${ownerId}/widget/ModalDonation.Main`}
+      loading={""}
+      props={{
+        ...props,
+        isModalOpen: isModalDonationOpen,
+        onClose: () => setIsModalDonationOpen(false),
+        potId,
+        potDetail,
+        projects,
+        referrerId,
+        multiple: true,
+        openDonationModalSuccess: (donation) => {
+          setIsModalDonationOpen(false);
+          setSuccessfulDonation(donation);
+        },
+      }}
+    />
+    {successfulDonation && (
+      <Widget
+        src={`${ownerId}/widget/Project.ModalSuccess`}
+        props={{
+          ...props,
+          successfulDonation: successfulDonation,
+          isModalOpen: successfulDonation != null,
+          onClose: () => setSuccessfulDonation(null),
+        }}
+      />
+    )}
   </Container>
 );
diff --git a/apps/potlock/widget/Pots/Payouts.jsx b/apps/potlock/widget/Pots/Payouts.jsx
index 7e96662c..bf1ed3f4 100644
--- a/apps/potlock/widget/Pots/Payouts.jsx
+++ b/apps/potlock/widget/Pots/Payouts.jsx
@@ -1,5 +1,5 @@
 // get donations
-const { potId, potDetail } = props;
+const { potId, potDetail, allDonations } = props;
 // potDetail.cooldown_end_ms = 1710105146000; // TODO: remove this line
 const { ownerId, SUPPORTED_FTS } = VM.require("potlock.near/widget/constants") || {
   ownerId: "",
@@ -297,9 +297,8 @@ State.init({
 
 const { allPayouts, filteredPayouts, showChallengePayoutsModal } = state;
 
-const allDonationsForPot = Near.view(potId, "get_public_round_donations", {});
-if (!allPayouts && allDonationsForPot) {
-  const calculatedPayouts = calculatePayouts(allDonationsForPot, potDetail.matching_pool_balance);
+if (!allPayouts && allDonations) {
+  const calculatedPayouts = calculatePayouts(allDonations, potDetail.matching_pool_balance);
   console.log("calculated payouts: ", calculatedPayouts);
   if (potDetail.payouts.length) {
     // handle these payouts, which don't contain all the info needed
diff --git a/apps/potlock/widget/Pots/PoolAllocationTable.jsx b/apps/potlock/widget/Pots/PoolAllocationTable.jsx
index 50fd386a..c6e45d9e 100644
--- a/apps/potlock/widget/Pots/PoolAllocationTable.jsx
+++ b/apps/potlock/widget/Pots/PoolAllocationTable.jsx
@@ -2,7 +2,13 @@ const {
   potId,
   env,
   hrefWithParams,
-  potDetail: { base_currency, total_public_donations, matching_pool_balance },
+  allDonations,
+  potDetail: {
+    base_currency,
+    total_public_donations,
+    matching_pool_balance,
+    public_donations_count,
+  },
 } = props;
 
 const { ownerId, NADA_BOT_URL, SUPPORTED_FTS } = VM.require("potlock.near/widget/constants") || {
@@ -65,7 +71,6 @@ const calcUniqueDonors = (donations) => {
 };
 
 const calcMatchedAmount = (donations) => {
-  console.log("donations", donations);
   const total = Big(0);
   donations.forEach((donation) => {
     total = total.plus(Big(donation.net_amount));
@@ -74,16 +79,14 @@ const calcMatchedAmount = (donations) => {
   return amount;
 };
 
-const allDonationsForPot = Near.view(potId, "get_public_round_donations", {});
-
-const uniqueDonorIds = allDonationsForPot
-  ? new Set(allDonationsForPot.map((donation) => donation.donor_id))
+const uniqueDonorIds = allDonations
+  ? new Set(allDonations.map((donation) => donation.donor_id))
   : new Set([]);
 
 const donorsCount = uniqueDonorIds.size;
 
-if (!allPayouts && allDonationsForPot?.length > 0) {
-  const calculatedPayouts = calculatePayouts(allDonationsForPot, matching_pool_balance);
+if (!allPayouts && allDonations?.length > 0) {
+  const calculatedPayouts = calculatePayouts(allDonations, matching_pool_balance);
 
   let allPayouts = [];
 
diff --git a/apps/potlock/widget/Pots/Projects.jsx b/apps/potlock/widget/Pots/Projects.jsx
index 2cdb28ed..a5a44518 100644
--- a/apps/potlock/widget/Pots/Projects.jsx
+++ b/apps/potlock/widget/Pots/Projects.jsx
@@ -174,7 +174,7 @@ const [filteredProjects, setFilteredProjects] = useState([]);
 const [projects, setProjects] = useState(null);
 
 // get projects
-const { ownerId, potId, potDetail, sybilRequirementMet } = props;
+const { ownerId, potId, potDetail, sybilRequirementMet, allDonations } = props;
 const { calculatePayouts, getTagsFromSocialProfileData, getTeamMembersFromSocialProfileData } =
   VM.require("potlock.near/widget/utils") || {
     calculatePayouts: () => {},
@@ -197,12 +197,9 @@ const { public_round_start_ms, public_round_end_ms, referral_fee_public_round_ba
 const now = Date.now();
 const publicRoundOpen = now >= public_round_start_ms && now < public_round_end_ms;
 
-const allDonationsForPot = PotSDK.getPublicRoundDonations(potId) || [];
-
 const payouts = useMemo(() => {
-  if (allDonationsForPot.length)
-    return calculatePayouts(allDonationsForPot, potDetail.matching_pool_balance);
-}, [allDonationsForPot]);
+  if (allDonations.length) return calculatePayouts(allDonations, potDetail.matching_pool_balance);
+}, [allDonations]);
 
 const searchByWords = (searchTerm) => {
   if (projects.length) {
@@ -274,7 +271,8 @@ return (
               loading={<CardSkeleton />}
               props={{
                 ...props,
-                potId,
+                potDetail,
+                projects,
                 projectId: project.project_id,
                 allowDonate:
                   sybilRequirementMet &&
diff --git a/apps/potlock/widget/Project/Card.jsx b/apps/potlock/widget/Project/Card.jsx
index 2f45978f..84a262c9 100644
--- a/apps/potlock/widget/Project/Card.jsx
+++ b/apps/potlock/widget/Project/Card.jsx
@@ -1,4 +1,4 @@
-const { potId, potDetail, payoutDetails } = props;
+const { potId, potDetail, payoutDetails, projects } = props;
 const { nearToUsd, ipfsUrlFromCid, yoctosToNear, yoctosToUsdWithFallback } = VM.require(
   "potlock.near/widget/utils"
 ) || {
@@ -347,7 +347,7 @@ const CardSkeleton = () => (
 State.init({
   donateModal: {
     isOpen: false,
-    recipientId: null,
+    projectId: null,
     referrerId: null,
     potId: null,
     potDetail: null,
@@ -359,7 +359,7 @@ const openDonateModal = () => {
   State.update({
     donateModal: {
       isOpen: true,
-      recipientId: projectId,
+      projectId: projectId,
       referrerId: null,
       potId: null,
       potDetail: null,
@@ -402,7 +402,9 @@ const [totalAmountNear, totalDonors] = useMemo(() => {
   return [totalDonationAmountNear.toString(), donors.length];
 }, [donationsForProject]);
 
-const projectUrl = props.hrefWithParams(`?tab=project&projectId=${projectId}`);
+const projectUrl = props.hrefWithParams(
+  `?tab=project&projectId=${projectId}${potId ? "&potId=" + potId : ""}`
+);
 
 const getImageSrc = (image) => {
   const defaultImageUrl =
@@ -543,7 +545,7 @@ return (
     </CardLink>
     {state.donateModal.isOpen && (
       <Widget
-        src={`${ownerId}/widget/Project.ModalDonation`}
+        src={`${ownerId}/widget/ModalDonation.Main`}
         loading={""}
         props={{
           ...props,
@@ -552,7 +554,7 @@ return (
             State.update({
               donateModal: {
                 isOpen: false,
-                recipientId: null,
+                projectId: null,
                 referrerId: null,
                 potId: null,
                 potDetail: null,
@@ -562,7 +564,7 @@ return (
             State.update({
               donateModal: {
                 isOpen: false,
-                recipientId: null,
+                projectId: null,
                 referrerId: null,
                 potId: null,
                 potDetail: null,
@@ -570,9 +572,8 @@ return (
               successfulDonation: donation,
             });
           },
-          recipientId: state.donateModal.recipientId,
+          projectId: state.donateModal.projectId,
           referrerId: props.referrerId,
-          potId,
         }}
       />
     )}
diff --git a/apps/potlock/widget/Project/CreateForm.jsx b/apps/potlock/widget/Project/CreateForm.jsx
index 0d50f98b..b11ddbf0 100644
--- a/apps/potlock/widget/Project/CreateForm.jsx
+++ b/apps/potlock/widget/Project/CreateForm.jsx
@@ -278,30 +278,91 @@ const FundingHeaderItemText = styled.div`
   word-wrap: break-word;
 `;
 
-const TableRow = styled.div`
+const Table = styled.div`
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-`;
-
-const TableRowItem = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 20px;
-  padding: 20px;
-  width: ${100 / FUNDING_SOURCE_COLUMNS.length}%;
-`;
-
-const TableRowText = styled.div`
-  color: #292929;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  word-wrap: break-word;
+  flex-direction: column;
+  border-radius: 6px;
+  border: 1px solid #7b7b7b;
+  background: #fff;
+  .header,
+  .fudning-row {
+    display: flex;
+    justify-content: space-between;
+  }
+  .header {
+    border-bottom: 0.5px solid #7b7b7b;
+  }
+  .fudning-row:not(:last-of-type) {
+    border-bottom: 0.5px solid #7b7b7b;
+  }
+  .item {
+    width: 140px;
+    display: flex;
+    align-items: center;
+    &:nth-of-type(1) {
+      width: 190px;
+    }
+    &:nth-of-type(2) {
+      flex: 1;
+    }
+  }
+  .source {
+    width: 190px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    div {
+      font-weight: 600;
+    }
+    div:last-of-type {
+      color: #7b7b7b;
+      font-weight: 400;
+    }
+  }
+  .amount {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    div:last-child {
+      font-weight: 600;
+    }
+  }
+  .btns {
+    width: 95px;
+    gap: 2rem;
+    justify-content: space-between;
+    svg {
+      cursor: pointer;
+      path {
+        transition: 300ms ease-in-out;
+      }
+      &:hover {
+        path {
+          fill: black;
+        }
+      }
+    }
+  }
+  .header .item {
+    padding: 10px 1rem;
+    color: #7b7b7b;
+    font-weight: 600;
+  }
+  .fudning-row .item {
+    padding: 1rem 1rem;
+  }
+  @media only screen and (max-width: 769px) {
+    .header {
+      display: none;
+    }
+    .fudning-row {
+      flex-direction: column;
+    }
+    .item {
+      width: 100%;
+      justify-content: flex-start;
+    }
+  }
 `;
 
 State.init({
@@ -902,6 +963,8 @@ const uploadFileUpdateState = (body, callback) => {
 
 // console.log("state in create form: ", state);
 
+console.log(state.fundingSources);
+
 return (
   <Container>
     {!state.socialDataFetched || !registrations ? (
@@ -1436,55 +1499,97 @@ return (
                 </FormSectionRightDiv> */}
               </FormSectionContainer>
               {state.fundingSources.length > 0 && (
-                <FundingHeader>
-                  {FUNDING_SOURCE_COLUMNS.map((column, index) => (
-                    <FundingHeaderItem>
-                      <FundingHeaderItemText key={index}>{column}</FundingHeaderItemText>
-                    </FundingHeaderItem>
-                  ))}
-                </FundingHeader>
-              )}
-              {state.fundingSources.map(
-                ({ investorName, description, amountReceived, denomination }, index) => {
-                  return (
-                    <TableRow key={index}>
-                      <TableRowItem>
-                        <TableRowText>{investorName}</TableRowText>
-                      </TableRowItem>
-                      <TableRowItem>
-                        <TableRowText>{description}</TableRowText>
-                      </TableRowItem>
-                      <TableRowItem>
-                        <TableRowText>{amountReceived}</TableRowText>
-                      </TableRowItem>
-                      <TableRowItem>
-                        <TableRowText>{denomination}</TableRowText>
-                        {/* <Icon
-                          src={EDIT_ICON_URL}
-                          onClick={() => {
+                <Table>
+                  <div className="header">
+                    <div className="item">Funding source</div>
+                    <div className="item">Description</div>
+                    <div className="item amount">Amount</div>
+                    <div className="btns" />
+                  </div>
+                  {state.fundingSources.map((funding, idx) => (
+                    <div className="fudning-row" key={funding.investorName}>
+                      <div className="item source">
+                        <div>{funding.investorName}</div>
+                        {funding.date && (
+                          <div>
+                            {new Date(funding.date).toLocaleDateString("en-US", {
+                              month: "numeric",
+                              day: "numeric",
+                              year: "numeric",
+                            })}
+                          </div>
+                        )}
+                      </div>
+                      <div className="item">{funding.description}</div>
+                      <div className="item amount">
+                        <div>{funding.denomination}</div>
+                        <div>{funding.amountReceived}</div>
+                      </div>
+                      <div className="btns item">
+                        {/* Edit Button */}
+                        <svg
+                          onClick={() =>
                             State.update({
-                              fundingSourceIndex: index,
-                            });
-                          }}
-                        /> */}
-                        <DeleteIcon
+                              fundingSourceIndex: idx,
+                            })
+                          }
+                          width="18"
+                          height="18"
+                          viewBox="0 0 18 18"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g clip-path="url(#clip0_446_76)">
+                            <path
+                              d="M15.369 0.290547C14.979 -0.0994531 14.349 -0.0994531 13.959 0.290547L12.129 2.12055L15.879 5.87055L17.709 4.04055C18.099 3.65055 18.099 3.02055 17.709 2.63055L15.369 0.290547Z"
+                              fill="#7B7B7B"
+                            />
+                            <path
+                              d="M-0.000976562 18.0005H3.74902L14.809 6.94055L11.059 3.19055L-0.000976562 14.2505V18.0005ZM1.99902 15.0805L11.059 6.02055L11.979 6.94055L2.91902 16.0005H1.99902V15.0805Z"
+                              fill="#7B7B7B"
+                            />
+                          </g>
+                          <defs>
+                            <clipPath id="clip0_446_76">
+                              <rect width="18" height="18" fill="white" />
+                            </clipPath>
+                          </defs>
+                        </svg>
+                        {/* Delete Button */}
+                        <svg
                           onClick={() => {
                             const updatedFundingSources = state.fundingSources.filter(
-                              (fs, i) => i != index
+                              (fudning, i) => i !== idx
                             );
-                            State.update({ fundingSources: updatedFundingSources });
+                            State.update({
+                              fundingSources: updatedFundingSources,
+                            });
                           }}
-                        />
-                      </TableRowItem>
-                    </TableRow>
-                  );
-                }
+                          width="14"
+                          height="18"
+                          viewBox="0 0 14 18"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M11 6V16H3V6H11ZM9.5 0H4.5L3.5 1H0V3H14V1H10.5L9.5 0ZM13 4H1V16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4Z"
+                            fill="#7B7B7B"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  ))}
+                </Table>
               )}
               <Widget
                 src={`${ownerId}/widget/Components.Button`}
                 props={{
                   type: "tertiary",
                   text: "Add funding source",
+                  style: {
+                    width: "fit-content",
+                    marginTop: "1rem",
+                  },
                   disabled: state.fundingSources.some(
                     (fs) =>
                       !fs.investorName || !fs.amountReceived || !fs.denomination || !fs.description
@@ -1647,6 +1752,7 @@ return (
             fundingSourceIndex: state.fundingSourceIndex,
             handleAddFundingSource: ({
               investorName,
+              date,
               description,
               amountReceived,
               denomination,
@@ -1655,6 +1761,7 @@ return (
                 if (i == state.fundingSourceIndex) {
                   return {
                     investorName,
+                    date,
                     description,
                     amountReceived,
                     denomination,
diff --git a/apps/potlock/widget/Project/DonationsInfo.jsx b/apps/potlock/widget/Project/DonationsInfo.jsx
index 0f7077a8..7b598405 100644
--- a/apps/potlock/widget/Project/DonationsInfo.jsx
+++ b/apps/potlock/widget/Project/DonationsInfo.jsx
@@ -1,4 +1,4 @@
-const { accountId, projectId, donations } = props;
+const { accountId, projectId, donations, referrerId } = props;
 
 const { ownerId, SUPPORTED_FTS } = VM.require("potlock.near/widget/constants") || {
   ownerId: "",
@@ -112,21 +112,18 @@ return (
     </div>
 
     <Widget
-      src={`${ownerId}/widget/Project.ModalDonation`}
+      src={`${ownerId}/widget/ModalDonation.Main`}
+      loading={""}
       props={{
         ...props,
         isModalOpen: isModalDonationOpen,
         onClose: () => setIsModalDonationOpen(false),
-        recipientId: props.projectId,
-        referrerId: props.referrerId,
-        openDonateToProjectModal: () => setIsModalDonationOpen(true),
+        projectId,
+        referrerId,
         openDonationModalSuccess: (donation) => {
           setIsModalDonationOpen(false);
-          State.update({
-            successfulDonation: donation,
-          });
+          setSuccessfulDonation(donation);
         },
-        // potId: state.donateToProjectModal.potId, // TODO: add this in if project is in a pot?
       }}
     />
     {successfulDonation && (
@@ -134,12 +131,9 @@ return (
         src={`${ownerId}/widget/Project.ModalSuccess`}
         props={{
           ...props,
-          successfulDonation: state.successfulDonation,
-          isModalOpen: state.successfulDonation != null,
-          onClose: () =>
-            State.update({
-              successfulDonation: null,
-            }),
+          successfulDonation: successfulDonation,
+          isModalOpen: successfulDonation != null,
+          onClose: () => setSuccessfulDonation(null),
         }}
       />
     )}
diff --git a/apps/potlock/widget/Project/ExternalFunding.jsx b/apps/potlock/widget/Project/ExternalFunding.jsx
index 0fb10b25..ab18c25c 100644
--- a/apps/potlock/widget/Project/ExternalFunding.jsx
+++ b/apps/potlock/widget/Project/ExternalFunding.jsx
@@ -140,7 +140,7 @@ const ArrowDown = (props) => (
   </Arrow>
 );
 
-const externalTableTabs = ["funding Source", "description", "amount"];
+const externalTableTabs = ["funding Source", "description", "date", "amount"];
 
 return (
   <Container>
@@ -165,11 +165,12 @@ return (
           </div>
         ))}
       </div>
-      {externalFunding.map(({ investorName, description, amountReceived, denomination }) => (
+      {externalFunding.map(({ investorName, description, date, amountReceived, denomination }) => (
         <div className="funding-row">
           <div style={{ fontWeight: 600 }}>{investorName}</div>
           <input type="checkbox" className="toggle-check" />
           <div className="description">{description}</div>
+          <div className="date">{date ?? "No specified date"}</div>
           <div className="amount">
             {parseFloat(amountReceived).toLocaleString() + " " + denomination}{" "}
             <ArrowDown showFundingTable={showFundingTable} />
diff --git a/apps/potlock/widget/Project/ListPage.jsx b/apps/potlock/widget/Project/ListPage.jsx
index 26386ac1..ba867929 100644
--- a/apps/potlock/widget/Project/ListPage.jsx
+++ b/apps/potlock/widget/Project/ListPage.jsx
@@ -766,6 +766,13 @@ const handleTag = (key) => {
   setTagsList(tags);
 };
 
+const getRandomProject = () => {
+  if (projects) {
+    const randomIndex = Math.floor(Math.random() * projects.length);
+    return projects[randomIndex]?.registrant_id;
+  }
+};
+
 return (
   <>
     <HeroContainer>
@@ -813,10 +820,11 @@ return (
           <Button onClick={donateRandomly}>Donate Randomly</Button>
           {state.isModalOpen && (
             <Widget
-              src={`${ownerId}/widget/Project.ModalDonation`}
+              src={`${ownerId}/widget/ModalDonation.Main`}
               props={{
                 ...props,
                 isModalOpen: state.isModalOpen,
+                projectId: getRandomProject(),
                 onClose: () =>
                   State.update({
                     isModalOpen: false,
diff --git a/apps/potlock/widget/Project/ModalAddFundingSource.jsx b/apps/potlock/widget/Project/ModalAddFundingSource.jsx
index 654e270b..da3a596b 100644
--- a/apps/potlock/widget/Project/ModalAddFundingSource.jsx
+++ b/apps/potlock/widget/Project/ModalAddFundingSource.jsx
@@ -7,26 +7,26 @@ const {
   fundingSourceIndex,
 } = props;
 
-// console.log("props in add funding source modal: ", props);
-
-State.init({
+const initalState = {
   investorName: fundingSources[fundingSourceIndex]?.investorName || "",
   investorNameError: "",
+  date: fundingSources[fundingSourceIndex]?.date || "",
+  dateError: "",
   description: fundingSources[fundingSourceIndex]?.description || "",
   descriptionError: "",
   denomination: fundingSources[fundingSourceIndex]?.denomination || "",
   denominationError: "",
   amountReceived: fundingSources[fundingSourceIndex]?.amountReceived || "",
   amountReceivedError: "",
-});
+};
+
+State.init(initalState);
 
-// console.log("state in add funding source modal: ", state);
+useEffect(() => {
+  State.update(initalState);
+}, [fundingSources, fundingSourceIndex]);
 
 const IPFS_BASE_URL = "https://nftstorage.link/ipfs/";
-// const MONEY_ICON_URL =
-//   IPFS_BASE_URL + "bafkreiem3zqv4smaflel54lwtl65d7zbulkan3vnfor4fi2sqn3n5p7tpe";
-// const CLOSE_ICON_URL =
-//   IPFS_BASE_URL + "bafkreifyg2vvmdjpbhkylnhye5es3vgpsivhigkjvtv2o4pzsae2z4vi5i";
 
 const ModalHeader = styled.div`
   display: flex;
@@ -144,6 +144,22 @@ return (
                 error: state.investorNameError,
               }}
             />
+            <Widget
+              src={`${ownerId}/widget/Inputs.Date`}
+              props={{
+                label: (
+                  <>
+                    Date <span>(optional)</span>
+                  </>
+                ),
+
+                //   placeholder: "0", // TODO: possibly add this back in
+                selectTime: false,
+                value: state.date,
+                onChange: (date) => State.update({ date: date }),
+                error: state.dateError,
+              }}
+            />
             <Widget
               src={`${ownerId}/widget/Inputs.TextArea`}
               props={{
@@ -209,6 +225,7 @@ return (
                   disabled:
                     !state.investorName ||
                     !!state.investorNameError ||
+                    !!state.dateError ||
                     !state.description ||
                     !!state.descriptionError ||
                     !state.denomination ||
@@ -218,6 +235,7 @@ return (
                   onClick: () => {
                     const fundingSource = {
                       investorName: state.investorName,
+                      date: state.date,
                       description: state.description,
                       denomination: state.denomination,
                       amountReceived: state.amountReceived,
@@ -225,6 +243,8 @@ return (
                     State.update({
                       investorName: "",
                       investorNameError: "",
+                      date: "",
+                      dateError: "",
                       description: "",
                       descriptionError: "",
                       denomination: "",
diff --git a/apps/potlock/widget/Project/ModalDonation.jsx b/apps/potlock/widget/Project/ModalDonation.jsx
index 6d8a1f44..53f3f3bd 100644
--- a/apps/potlock/widget/Project/ModalDonation.jsx
+++ b/apps/potlock/widget/Project/ModalDonation.jsx
@@ -118,8 +118,6 @@ const Label = styled.label`
 const UserChipLink = styled.a`
   display: flex;
   flex-direction: row;
-  // align-items: center;
-  // justify-content: center;
   padding: 2px 12px;
   margin: 0px 4px;
   gap: 4px;
@@ -133,7 +131,7 @@ const UserChipLink = styled.a`
 
 const TextBold = styled.div`
   color: #292929;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 600;
   line-height: 20px;
   word-wrap: break-word;
@@ -245,14 +243,6 @@ ListsSDK = ListsSDK({ env: props.env });
 
 const projects = ListsSDK.getRegistrations() || [];
 
-let DonateSDK =
-  VM.require("potlock.near/widget/SDK.donate") ||
-  (() => ({
-    getConfig: () => {},
-    asyncGetDonationsForDonor: () => {},
-  }));
-DonateSDK = DonateSDK({ env: props.env });
-
 let PotFactorySDK =
   VM.require("potlock.near/widget/SDK.potfactory") ||
   (() => ({
@@ -490,6 +480,14 @@ const protocolConfig =
     ? Near.view(protocolConfigContractId, protocolConfigViewMethodName, {})
     : null;
 
+let DonateSDK =
+  VM.require("potlock.near/widget/SDK.donate") ||
+  (() => ({
+    getConfig: () => {},
+    asyncGetDonationsForDonor: () => {},
+  }));
+DonateSDK = DonateSDK({ env: props.env });
+
 const donationContractConfig = !potDetail ? DonateSDK.getConfig() || {} : null;
 
 const [protocolFeeRecipientAccount, protocolFeeBasisPoints, referralFeeBasisPoints] = useMemo(
@@ -1083,12 +1081,8 @@ return (
                   : userShouldVerify
                   ? "Nah, I want to have less impact"
                   : "Donate",
-                // disabled: !state.reviewMessage || !!state.reviewMessageError,
                 disabled: donateDisabled,
                 onClick: handleDonate,
-                // href: userShouldVerify ? props.NADA_BOT_URL : null,
-                // target: userShouldVerify ? "_blank" : "_self",
-                // iconSrc: userShouldVerify ? NADABOT_ICON_URL : null,
                 style: {
                   padding: "12px 16px",
                 },
diff --git a/apps/potlock/widget/Project/ModalSuccess.jsx b/apps/potlock/widget/Project/ModalSuccess.jsx
index 0e19778f..f996531f 100644
--- a/apps/potlock/widget/Project/ModalSuccess.jsx
+++ b/apps/potlock/widget/Project/ModalSuccess.jsx
@@ -1,4 +1,4 @@
-const { onClose, successfulDonation } = props;
+const { onClose } = props;
 const {
   ownerId,
   SUPPORTED_FTS: { NEAR },
@@ -8,7 +8,7 @@ const {
   SUPPORTED_FTS: {},
   IPFS_BASE_URL: "",
 };
-const { yoctosToUsd } = VM.require("potlock.near/widget/utils") || { yoctosToUsd: () => "" };
+const { yoctosToUsd } = VM.require("potlock.near/widget/utils") || { yoctosToUsd: () => null };
 
 let DonateSDK =
   VM.require("potlock.near/widget/SDK.donate") ||
@@ -51,8 +51,8 @@ const ModalMain = styled.div`
   align-items: center;
   justify-content: center;
   width: 100%;
-  gap: 24px;
-  padding: 80px 36px;
+  gap: 2rem;
+  padding: 40px 32px;
 `;
 
 const ModalFooter = styled.div`
@@ -67,42 +67,87 @@ const ModalFooter = styled.div`
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
 `;
+
+const ModalHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+`;
+
 const HeaderIcon = styled.div`
-  padding: 1rem;
-  width: 64px;
-  height: 64px;
-  border-radius: 44px;
-  background: radial-gradient(97.66% 97.66% at 50% 2.34%, #e84a5b 0%, #c02031 100%);
-  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25) inset;
+  padding: 12px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #dd3345;
+  box-shadow: 0px 0px 0px 6px #fee6e5;
   svg {
     width: 100%;
     height: 100%;
   }
 `;
+
+const TwitterShare = styled.a`
+  display: flex;
+  gap: 8px;
+  color: white;
+  border-radius: 4px;
+  padding: 6px 1rem;
+  background: rgb(41, 41, 41);
+  align-items: center;
+  font-size: 14px;
+  cursor: pointer;
+  :hover {
+    text-decoration: none;
+  }
+`;
+const ModalMiddel = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  .amount-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: center;
+    img,
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+    img {
+      border-radius: 50%;
+    }
+  }
+`;
+
 const Amount = styled.div`
-  color: #292929;
-  font-size: 32px;
-  font-weight: 600;
-  line-height: 40px;
-  font-family: "Lora";
+  font-size: 22px;
+  font-weight: 500;
+  letter-spacing: -0.33px;
+  text-transform: uppercase;
 `;
 
 const AmountUsd = styled.div`
   color: #7b7b7b;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  word-wrap: break-word;
-`;
-
-const NearIcon = styled.svg`
-  width: 28px;
-  height: 28px;
+  font-size: 22px;
 `;
 
-const ImgIcon = styled.img`
-  width: 28px;
-  height: 28px;
+const ProjectName = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 14px;
+  div {
+    color: #7b7b7b;
+  }
+  a {
+    color: #525252;
+    &:hover {
+      text-decoration: none;
+    }
+  }
 `;
 
 const H1 = styled.h1`
@@ -165,31 +210,54 @@ const SocialIcon = styled.svg`
 
 State.init({
   showBreakdown: false,
-  successfulDonation,
 });
+const [successfulDonation, setSuccessfulDonation] = useState(props.successfulDonation);
+const [ftMetadata, setFtMetadata] = useState(null);
+const { recipientProfile, successfulApplication } = state;
+
+const successfulDonationVals = successfulDonation ? Object.values(successfulDonation) : [];
+const recipientProfileVals = recipientProfile ? Object.values(recipientProfile) : [];
 
-const getProfileDataForSuccessfulDonation = (donation) => {
-  const { donor_id, recipient_id, project_id } = donation;
-  Near.asyncView("social.near", "get", {
-    keys: [`${recipient_id || project_id}/profile/**`],
-  }).then((recipientData) => {
+const getProfileDataForSuccessfulDonation = (donationsObj) => {
+  const donations = Object.values(donationsObj);
+  donations.forEach((donation) => {
+    const { donor_id, recipient_id, project_id } = donation;
     Near.asyncView("social.near", "get", {
-      keys: [`${donor_id}/profile/**`],
-    }).then((donorData) => {
-      State.update({
-        recipientProfile: recipientData[recipient_id || project_id]?.profile || {},
-        donorProfile: donorData[donor_id]?.profile || {},
+      keys: [`${recipient_id || project_id}/profile/**`],
+    }).then((recipientData) => {
+      Near.asyncView("social.near", "get", {
+        keys: [`${donor_id}/profile/**`],
+      }).then((donorData) => {
+        State.update({
+          recipientProfile: {
+            ...recipientProfile,
+            [recipient_id || project_id]: recipientData[recipient_id || project_id]?.profile || {},
+          },
+          donorProfile: donorData[donor_id]?.profile || {},
+        });
       });
     });
   });
 };
 
-if (state.successfulDonation && !state.recipientProfile) {
-  getProfileDataForSuccessfulDonation(state.successfulDonation);
+if (successfulDonation && !recipientProfile) {
+  getProfileDataForSuccessfulDonation(successfulDonation);
 }
+const getTotalAmount = () => {
+  const totalAmount = Big(0);
+  if (successfulDonation) {
+    successfulDonationVals.forEach(
+      (doantion) => (totalAmount = totalAmount.plus(Big(doantion.total_amount)))
+    );
+  }
+  return totalAmount.toString();
+};
+
+const totalAmount = getTotalAmount();
 
-if (props.isModalOpen && !state.successfulDonation) {
+if (props.isModalOpen && !successfulDonation) {
   const transactionHashes = props.transactionHashes.split(",");
+
   for (let i = 0; i < transactionHashes.length; i++) {
     const txHash = transactionHashes[i];
     const body = JSON.stringify({
@@ -198,82 +266,111 @@ if (props.isModalOpen && !state.successfulDonation) {
       method: "tx",
       params: [txHash, context.accountId],
     });
-    const res = fetch("https://rpc.mainnet.near.org", {
+    const res = asyncFetch("https://rpc.mainnet.near.org", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body,
-    });
-    // console.log("tx res: ", res);
-    if (res.ok) {
-      const methodName = res.body.result.transaction.actions[0].FunctionCall.method_name;
-      const successVal = res.body.result.status?.SuccessValue;
-      let decoded = JSON.parse(Buffer.from(successVal, "base64").toString("utf-8")); // atob not working
-      if (methodName === "donate") {
-        // NEAR donation
-        State.update({
-          successfulDonation: decoded,
-        });
-        break;
-      } else if (methodName === "apply") {
-        // application
-        State.update({
-          successfulApplication: decoded,
-        });
-        break;
-      } else if (methodName === "ft_transfer_call") {
-        // FT donation
+    })
+      .then((res) => {
+        const methodName = res.body.result.transaction.actions[0].FunctionCall.method_name;
+        const successVal = res.body.result.status?.SuccessValue;
+        const receiver_id = res.body.result.transaction.receiver_id;
+        const result = JSON.parse(Buffer.from(successVal, "base64").toString("utf-8")); // atob not working
+
         const args = JSON.parse(
           Buffer.from(res.body.result.transaction.actions[0].FunctionCall.args, "base64").toString(
             "utf-8"
           )
         );
-        const signerId = res.body.result.transaction.signer_id;
-        Near.asyncView(DONATION_CONTRACT_ID, "get_donations_for_donor", {
-          donor_id: signerId,
-        })
-          .then((donations) => {
-            if (donations.length) {
-              const donation = donations.sort((a, b) => b.donated_at_ms - a.donated_at_ms)[0];
-              State.update({
-                successfulDonation: donation,
-              });
-            }
-          })
-          .catch((e) => console.log("error fetching donations for donor: ", e));
-        break;
-      } else {
-        if (i === transactionHashes.length - 1) {
-          // close modal
-          onClose();
+
+        const recipientId =
+          methodName === "donate"
+            ? result.project_id
+              ? result.project_id
+              : result.recipient_id
+            : methodName === "ft_transfer_call"
+            ? JSON.parse(args.msg).recipient_id
+            : "";
+
+        if (recipientId) {
+          if (methodName === "donate") {
+            setSuccessfulDonation((prev) => ({
+              ...prev,
+              [recipientId]: result,
+            }));
+          } else if (methodName === "apply") {
+            // application
+            State.update({
+              successfulApplication: result,
+            });
+          } else if (methodName === "ft_transfer_call" && recipientId) {
+            asyncFetch(
+              `https://near-mainnet.api.pagoda.co/eapi/v1/nep141/metadata/${receiver_id}`,
+              {
+                headers: {
+                  "Content-Type": "application/json",
+                  "x-api-key": "dce81322-81b0-491d-8880-9cfef4c2b3c2",
+                },
+              }
+            )
+              .then((data) => {
+                const metadata = data.body.metadata;
+                setFtMetadata(metadata);
+                setSuccessfulDonation((prev) => ({
+                  ...prev,
+                  [recipientId]: {
+                    project_id: recipientId,
+                    total_amount: result,
+                  },
+                }));
+              })
+              .catch((err) => console.log(err));
+          }
         }
-      }
-    }
+      })
+      .catch((err) => console.log(err));
   }
 }
 
-const ftMetadata = Near.view(state.successfulDonation?.ft_id, "ft_metadata", {});
-
-// console.log("state in modal success: ", state);
+useEffect(() => {
+  if (successfulDonation && !ftMetadata) {
+    Near.asyncView(successfulDonationVals[0]?.ft_id, "ft_metadata", {}).then((metaDate) =>
+      setFtMetadata(metaDate)
+    );
+  }
+}, [successfulDonation]);
 
 const twitterIntent = useMemo(() => {
-  if (!state.recipientProfile) return;
+  if (!recipientProfile) return;
   const twitterIntentBase = "https://twitter.com/intent/tweet?text=";
+
+  const recipient_id =
+    successfulDonationVals[0].recipient_id || successfulDonationVals[0].project_id;
+  const profile = recipientProfileVals[0];
+  const singlePorject = profile
+    ? profile.linktree?.twitter
+      ? `@${profile.linktree.twitter}`
+      : profile.name
+    : recipient_id;
+
+  const tag =
+    `${singlePorject}` +
+    (successfulDonationVals.length > 1
+      ? ` and ${successfulDonationVals?.length - 1} other${
+          successfulDonationVals?.length === 2 ? "" : "s"
+        }`
+      : "");
+
   let url =
     DEFAULT_GATEWAY +
-    `${ownerId}/widget/Index?tab=project&projectId=${state.successfulDonation.recipient_id}&referrerId=${context.accountId}`;
-  let text = `I just donated to ${
-    state.recipientProfile
-      ? state.recipientProfile.linktree?.twitter
-        ? `@${state.recipientProfile.linktree.twitter}`
-        : state.recipientProfile.name
-      : state.successfulDonation.recipient_id
-  } on @${POTLOCK_TWITTER_ACCOUNT_ID}! Support public goods at `;
+    `${ownerId}/widget/Index?tab=project&projectId=${recipient_id}&referrerId=${context.accountId}`;
+  let text = `I just donated to ${tag} on @${POTLOCK_TWITTER_ACCOUNT_ID}! Support public goods at `;
   text = encodeURIComponent(text);
   url = encodeURIComponent(url);
   return twitterIntentBase + text + `&url=${url}` + `&hashtags=${DEFAULT_SHARE_HASHTAGS.join(",")}`;
-}, [state.successfulDonation, state.recipientProfile]);
+}, [successfulDonation, recipientProfile]);
 
 return (
   <Widget
@@ -283,156 +380,123 @@ return (
       contentStyle: {
         padding: "0px",
       },
-      children: state.successfulApplication ? (
+      children: successfulApplication ? (
         <>
           <ModalMain>
             <H1>Thank you for applying!</H1>
-            <TextBold>Your application status: {state.successfulApplication.status}</TextBold>
+            <TextBold>Your application status: {successfulApplication.status}</TextBold>
           </ModalMain>
         </>
-      ) : state.successfulDonation ? (
-        <>
-          <ModalMain>
+      ) : successfulDonation ? (
+        <ModalMain>
+          <ModalHeader>
             <HeaderIcon>
-              <svg viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg
+                width="18"
+                height="14"
+                viewBox="0 0 18 14"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
                 <path
-                  d="M6.39016 7.9C4.12016 7.31 3.39016 6.7 3.39016 5.75C3.39016 4.66 4.40016 3.9 6.09016 3.9C7.87016 3.9 8.53016 4.75 8.59016 6H10.8002C10.7302 4.28 9.68016 2.7 7.59016 2.19V0H4.59016V2.16C2.65016 2.58 1.09016 3.84 1.09016 5.77C1.09016 8.08 3.00016 9.23 5.79016 9.9C8.29016 10.5 8.79016 11.38 8.79016 12.31C8.79016 13 8.30016 14.1 6.09016 14.1C4.03016 14.1 3.22016 13.18 3.11016 12H0.910156C1.03016 14.19 2.67016 15.42 4.59016 15.83V18H7.59016V15.85C9.54016 15.48 11.0902 14.35 11.0902 12.3C11.0902 9.46 8.66016 8.49 6.39016 7.9Z"
+                  d="M5.79499 10.875L1.62499 6.70498L0.204987 8.11498L5.79499 13.705L17.795 1.70498L16.385 0.294983L5.79499 10.875Z"
                   fill="white"
                 />
               </svg>
             </HeaderIcon>
-            <Column>
-              <Row style={{ gap: "9px" }}>
-                <Amount>
-                  {state.successfulDonation?.total_amount
-                    ? parseFloat(
-                        // NEAR.fromIndivisible(state.successfulDonation.total_amount).toString()
-                        Big(state.successfulDonation.total_amount)
-                          .div(Big(10).pow(ftMetadata?.decimals || 24))
-                          .toFixed(2)
-                      )
-                    : "-"}
-                </Amount>
-                {ftMetadata?.icon ? (
-                  <ImgIcon src={ftMetadata.icon} />
-                ) : (
-                  <NearIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <rect width="24" height="24" rx="12" fill="#CECECE" />
+            <div>Donation Successful</div>
+            <TwitterShare href={twitterIntent} target="_blank">
+              <div>Share to</div>
+              <div className="icon">
+                <svg
+                  width="15"
+                  height="14"
+                  viewBox="0 0 15 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M14.25 13.4035L8.97064 5.70858L8.97965 5.71579L13.7398 0.200562H12.1491L8.27135 4.68956L5.19196 0.200562H1.02012L5.9489 7.38477L5.94831 7.38416L0.75 13.4035H2.34071L6.65183 8.40919L10.0782 13.4035H14.25ZM4.56169 1.40082L11.969 12.2032H10.7084L3.29515 1.40082H4.56169Z"
+                    fill="#DBDBDB"
+                  />
+                </svg>
+              </div>
+            </TwitterShare>
+          </ModalHeader>
+          <ModalMiddel>
+            <div className="amount-wrapper">
+              {ftMetadata?.icon ? (
+                <img src={ftMetadata.icon} />
+              ) : (
+                <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <g clip-path="url(#clip0_454_78)">
+                    <circle cx="8" cy="8" r="7.25" stroke="#292929" stroke-width="1.5" />
                     <path
-                      d="M15.616 6.61333L13.1121 10.3333C12.939 10.5867 13.2719 10.8933 13.5117 10.68L15.9756 8.53333C16.0422 8.48 16.1354 8.52 16.1354 8.61333V15.32C16.1354 15.4133 16.0155 15.4533 15.9623 15.3867L8.50388 6.45333C8.26415 6.16 7.91787 6 7.53163 6H7.26526C6.5727 6 6 6.57333 6 7.28V16.72C6 17.4267 6.5727 18 7.27858 18C7.71809 18 8.13097 17.7733 8.3707 17.3867L10.8746 13.6667C11.0477 13.4133 10.7148 13.1067 10.475 13.32L8.0111 15.4533C7.94451 15.5067 7.85128 15.4667 7.85128 15.3733V8.68C7.85128 8.58667 7.97114 8.54667 8.02442 8.61333L15.4828 17.5467C15.7225 17.84 16.0821 18 16.4551 18H16.7214C17.4273 18 18 17.4267 18 16.72V7.28C18 6.57333 17.4273 6 16.7214 6C16.2686 6 15.8557 6.22667 15.616 6.61333Z"
-                      fill="black"
+                      d="M11.1477 4C10.851 4 10.5763 4.15333 10.421 4.406L8.74866 6.88867C8.72453 6.92441 8.71422 6.96772 8.71967 7.01051C8.72511 7.05329 8.74594 7.09264 8.77826 7.1212C8.81057 7.14976 8.85218 7.1656 8.89531 7.16574C8.93844 7.16589 8.98015 7.15034 9.01266 7.122L10.6587 5.69467C10.6683 5.68598 10.6802 5.68028 10.6931 5.67828C10.7059 5.67628 10.719 5.67806 10.7308 5.6834C10.7426 5.68875 10.7526 5.69742 10.7596 5.70836C10.7665 5.7193 10.7702 5.73203 10.77 5.745V10.215C10.77 10.2287 10.7658 10.2421 10.7579 10.2534C10.7501 10.2646 10.7389 10.2732 10.726 10.2778C10.7131 10.2825 10.6991 10.2831 10.6858 10.2795C10.6726 10.2758 10.6608 10.2682 10.652 10.2577L5.67667 4.30167C5.59667 4.20709 5.49701 4.1311 5.38463 4.079C5.27226 4.0269 5.14987 3.99994 5.026 4H4.85233C4.62628 4 4.40949 4.0898 4.24964 4.24964C4.0898 4.40949 4 4.62628 4 4.85233V11.1477C4 11.3333 4.06061 11.5139 4.17263 11.6619C4.28465 11.81 4.44194 11.9174 4.6206 11.9679C4.79926 12.0184 4.98952 12.0091 5.16245 11.9416C5.33538 11.874 5.48152 11.7519 5.57867 11.5937L7.251 9.111C7.27513 9.07525 7.28544 9.03194 7.27999 8.98916C7.27455 8.94637 7.25372 8.90703 7.22141 8.87846C7.18909 8.8499 7.14748 8.83407 7.10435 8.83392C7.06122 8.83377 7.01951 8.84932 6.987 8.87766L5.341 10.3053C5.33134 10.3139 5.31939 10.3195 5.3066 10.3215C5.29381 10.3234 5.28074 10.3216 5.26898 10.3162C5.25721 10.3108 5.24726 10.3021 5.24034 10.2912C5.23342 10.2803 5.22983 10.2676 5.23 10.2547V5.784C5.22997 5.77027 5.23418 5.75687 5.24206 5.74563C5.24993 5.73438 5.26109 5.72584 5.274 5.72117C5.28691 5.71651 5.30094 5.71594 5.31419 5.71955C5.32743 5.72315 5.33924 5.73076 5.348 5.74133L10.3227 11.698C10.4847 11.8893 10.7227 11.9997 10.9733 12H11.147C11.373 12.0001 11.5898 11.9104 11.7498 11.7507C11.9097 11.591 11.9997 11.3744 12 11.1483V4.85233C11.9999 4.62631 11.9101 4.40956 11.7503 4.24974C11.5904 4.08992 11.3737 4.00009 11.1477 4Z"
+                      fill="#292929"
                     />
-                  </NearIcon>
-                )}
-              </Row>
-              {state.successfulDonation?.total_amount &&
-                yoctosToUsd(state.successfulDonation.total_amount) && (
-                  <AmountUsd>
-                    {yoctosToUsd(state.successfulDonation.total_amount) + " USD"}
-                  </AmountUsd>
-                )}
-            </Column>
-            <Row style={{ gap: "8px" }}>
-              <TextBold>Has been donated to</TextBold>
-              <UserChipLink
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_454_78">
+                      <rect width="16" height="16" fill="white" />
+                    </clipPath>
+                  </defs>
+                </svg>
+              )}
+              <Amount>
+                {totalAmount
+                  ? parseFloat(
+                      // NEAR.fromIndivisible(totalAmount).toString()
+                      Big(totalAmount)
+                        .div(Big(10).pow(ftMetadata?.decimals || 24))
+                        .toFixed(2)
+                    )
+                  : "-"}
+                {ftMetadata?.symbol || "NEAR"}
+              </Amount>
+              {totalAmount && yoctosToUsd(totalAmount) && !ftMetadata && (
+                <AmountUsd>{yoctosToUsd(totalAmount)} </AmountUsd>
+              )}
+            </div>
+
+            <ProjectName>
+              <div>Has been donated to</div>
+              <a
                 href={props.hrefWithParams(
                   `?tab=project&projectId=${
-                    state.successfulDonation.recipient_id || state.successfulDonation.project_id
+                    successfulDonationVals[0]?.recipient_id || successfulDonationVals[0]?.project_id
                   }`
                 )}
                 target="_blank"
               >
-                {state.successfulDonation && (
-                  <Widget
-                    src={`${ownerId}/widget/Project.ProfileImage`}
-                    props={{
-                      ...props,
-                      accountId:
-                        state.successfulDonation.recipient_id ||
-                        state.successfulDonation.project_id,
-                      style: {
-                        height: "17px",
-                        width: "17px",
-                      },
-                    }}
-                  />
-                )}
-                <TextBold>{state.recipientProfile?.name || "-"}</TextBold>
-              </UserChipLink>
-            </Row>
-            <Widget
-              src={`${ownerId}/widget/Cart.BreakdownSummary`}
-              props={{
-                ...props,
-                referrerId: state.successfulDonation?.referrer_id,
-                totalAmount: NEAR.fromIndivisible(
-                  state.successfulDonation?.total_amount || "0"
-                ).toString(),
-                bypassProtocolFee:
-                  !state.successfulDonation?.protocol_fee ||
-                  state.successfulDonation?.protocol_fee === "0", // TODO: allow user to choose
-                headerStyle: { justifyContent: "center" },
-                ftIcon: ftMetadata?.icon,
-              }}
-            />
-            <Row style={{ width: "100%", justifyContent: "center", gap: "24px" }}>
-              <Widget
-                src={`${ownerId}/widget/Components.Button`}
-                props={{
-                  type: "secondary",
-                  text: "Do it again!",
-                  onClick: () => {
-                    onClose();
-                  },
-                  style: { width: "100%" },
-                }}
-              />
-              <Widget
-                src={`${ownerId}/widget/Components.Button`}
-                props={{
-                  type: "secondary",
-                  text: "Explore projects",
-                  onClick: () => {
-                    onClose();
-                  },
-                  style: { width: "100%" },
-                }}
-              />
-            </Row>
-          </ModalMain>
-          <ModalFooter>
-            <Row style={{ gap: "6px", justifyContent: "center" }}>
-              <TextBold>From</TextBold>
-              <UserChip>
-                {state.donorProfile && (
-                  <Widget
-                    src={`${ownerId}/widget/Project.ProfileImage`}
-                    props={{
-                      ...props,
-                      accountId: state.successfulDonation?.donor_id,
-                      style: {
-                        height: "17px",
-                        width: "17px",
-                      },
-                    }}
-                  />
-                )}
-                <TextBold>{state.donorProfile?.name || "-"}</TextBold>
-              </UserChip>
-            </Row>
-            <Row style={{ gap: "8px", justifyContent: "center" }}>
-              <ShareText>Share to</ShareText>
-              <a href={twitterIntent} target="_blank">
-                <SocialIcon viewBox="0 0 21 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M20.92 2C20.15 2.35 19.32 2.58 18.46 2.69C19.34 2.16 20.02 1.32 20.34 0.31C19.51 0.81 18.59 1.16 17.62 1.36C16.83 0.5 15.72 0 14.46 0C12.11 0 10.19 1.92 10.19 4.29C10.19 4.63 10.23 4.96 10.3 5.27C6.74 5.09 3.57 3.38 1.46 0.79C1.09 1.42 0.88 2.16 0.88 2.94C0.88 4.43 1.63 5.75 2.79 6.5C2.08 6.5 1.42 6.3 0.84 6V6.03C0.84 8.11 2.32 9.85 4.28 10.24C3.65073 10.4122 2.9901 10.4362 2.35 10.31C2.62161 11.1625 3.15354 11.9084 3.87102 12.4429C4.5885 12.9775 5.45545 13.2737 6.35 13.29C4.83363 14.4904 2.954 15.1393 1.02 15.13C0.68 15.13 0.34 15.11 0 15.07C1.9 16.29 4.16 17 6.58 17C14.46 17 18.79 10.46 18.79 4.79C18.79 4.6 18.79 4.42 18.78 4.23C19.62 3.63 20.34 2.87 20.92 2Z"
-                    fill="#7B7B7B"
-                  />
-                </SocialIcon>
+                {recipientProfileVals[0]?.name ||
+                  successfulDonationVals[0]?.recipient_id ||
+                  successfulDonationVals[0]?.project_id ||
+                  "-"}
               </a>
-            </Row>
-          </ModalFooter>
-        </>
+              {successfulDonationVals.length > 1 && (
+                <div>and {successfulDonationVals.length - 1} others</div>
+              )}
+            </ProjectName>
+          </ModalMiddel>
+
+          <Widget
+            src={`${ownerId}/widget/Cart.BreakdownSummary`}
+            props={{
+              ...props,
+              referrerId: successfulDonationVals[0]?.referrer_id,
+              totalAmount: Big(totalAmount)
+                .div(Big(10).pow(ftMetadata?.decimals || 24))
+                .toFixed(2),
+              bypassProtocolFee:
+                !successfulDonationVals[0]?.protocol_fee ||
+                successfulDonationVals[0]?.protocol_fee === "0", // TODO: allow user to choose
+              ftIcon: ftMetadata?.icon,
+            }}
+          />
+        </ModalMain>
       ) : (
         ""
       ),
diff --git a/apps/potlock/widget/SDK/pot.jsx b/apps/potlock/widget/SDK/pot.jsx
index 87bd6091..1000a0ab 100644
--- a/apps/potlock/widget/SDK/pot.jsx
+++ b/apps/potlock/widget/SDK/pot.jsx
@@ -17,6 +17,9 @@ return {
       return config.owner === accountId || config.admins.includes(accountId);
     }
   },
+  isRoundActive: (potId) => {
+    return Near.asyncView(potId, "is_round_active", {});
+  },
   getMatchingPoolDonations: (potId) => {
     // TODO: paginate
     return Near.view(potId, "get_matching_pool_donations", {});
@@ -24,11 +27,15 @@ return {
   asyncGetMatchingPoolDonations: (potId) => {
     return Near.asyncView(potId, "get_matching_pool_donations", {});
   },
-  getPublicRoundDonations: (potId) => {
-    return Near.view(potId, "get_public_round_donations", {});
+  getPublicRoundDonations: (potId, args) => {
+    return Near.view(potId, "get_public_round_donations", {
+      ...(args || {}),
+    });
   },
-  asyncGetPublicRoundDonations: (potId) => {
-    return Near.asyncView(potId, "get_public_round_donations", {});
+  asyncGetPublicRoundDonations: (potId, args) => {
+    return Near.asyncView(potId, "get_public_round_donations", {
+      ...(args || {}),
+    });
   },
   getDonationsForDonor: (potId, accountId) => {
     return Near.view(potId, "get_donations_for_donor", { donor_id: accountId });
@@ -51,6 +58,9 @@ return {
   getApplicationByProjectId: (potId, projectId) => {
     return Near.view(potId, "get_application_by_project_id", { project_id: projectId });
   },
+  asyncGetApplicationByProjectId: (potId, projectId) => {
+    return Near.asyncView(potId, "get_application_by_project_id", { project_id: projectId });
+  },
   getApprovedApplications: (potId) => {
     return Near.view(potId, "get_approved_applications", {});
   },