diff --git a/client/src/components/Donation/Donation.css b/client/src/components/Donation/Donation.css
index 1db03309d0c7f1..d35768c44a4b44 100644
--- a/client/src/components/Donation/Donation.css
+++ b/client/src/components/Donation/Donation.css
@@ -163,16 +163,12 @@ li.disabled > a {
   padding: 20px;
 }
 
-.donation-modal p {
-  margin: 0;
-}
-
 .heart-icon-contaier {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin: 30px;
+  margin: 40px;
 }
 
 .heart-icon {
@@ -195,3 +191,30 @@ li.disabled > a {
     transform: scale(1);
   }
 }
+
+.donation-modal p {
+  margin: 0;
+  text-align: center;
+  font-weight: 700;
+  font-size: 1.2rem;
+}
+
+.donation-modal .modal-title {
+  text-align: center;
+  font-weight: 700;
+  font-size: 1.5rem;
+}
+
+@media screen and (max-width: 991px) {
+  .heart-icon-contaier {
+    margin: 30px;
+  }
+  .donation-modal p {
+    font-weight: 400;
+    font-size: 1rem;
+  }
+  .donation-modal .modal-title {
+    font-weight: 600;
+    font-size: 1.2rem;
+  }
+}
diff --git a/client/src/components/Donation/components/DonationModal.js b/client/src/components/Donation/components/DonationModal.js
index 5818ed6ba95497..1d7e24efce90d1 100644
--- a/client/src/components/Donation/components/DonationModal.js
+++ b/client/src/components/Donation/components/DonationModal.js
@@ -55,7 +55,7 @@ class DonateModal extends Component {
     return (
       <Modal bsSize='lg' className='donation-modal' show={show}>
         <Modal.Header className='fcc-modal'>
-          <Modal.Title className='text-center'>
+          <Modal.Title className='modal-title text-center'>
             <strong>Support freeCodeCamp.org</strong>
           </Modal.Title>
         </Modal.Header>