diff --git a/weblate_web/models.py b/weblate_web/models.py
index d681a78aac..8c19f28eea 100644
--- a/weblate_web/models.py
+++ b/weblate_web/models.py
@@ -508,17 +508,56 @@ def expires(self):
 
     def get_suggestions(self):
         if not self.support_subscriptions.exists():
-            yield "basic", _("Basic support")
+            yield (
+                "basic",
+                _("Basic support"),
+                _(
+                    "This will give you more of this and that. "
+                    "You can't resist, because it is a huge deal."
+                ),
+                "img/Support-Basic.svg",
+                _("Get more support"),
+            )
+
         if (
             not self.hosted_subscriptions.exists()
             and not self.shared_subscriptions.exists()
         ):
             if not self.premium_subscriptions.exists():
-                yield "premium", _("Extended support")
+                yield (
+                    "premium",
+                    _("Premium support"),
+                    _(
+                        "This will give you more of this and that. "
+                        "You can't resist, because it is a huge deal."
+                    ),
+                    "img/Support-Plus.svg",
+                    _("Get more support"),
+                )
+
             if not self.extended_subscriptions.exists():
-                yield "extended", _("Extended support")
+                yield (
+                    "extended",
+                    _("Extended support"),
+                    _(
+                        "This will give you more of this and that. "
+                        "You can't resist, because it is a huge deal."
+                    ),
+                    "img/Support-Premium.svg",
+                    _("Get more support"),
+                )
+
             if not self.backup_subscriptions.exists():
-                yield "backup", _("Backup service")
+                yield (
+                    "backup",
+                    _("Backup service"),
+                    _(
+                        "This will give you more of this and that. "
+                        "You can't resist, because it is a huge deal."
+                    ),
+                    "img/Support-Backup.svg",
+                    _("Get more support"),
+                )
 
     def update_status(self):
         status = "community"
diff --git a/weblate_web/static/custom.js b/weblate_web/static/custom.js
index 0300124208..dacf4b1354 100644
--- a/weblate_web/static/custom.js
+++ b/weblate_web/static/custom.js
@@ -207,3 +207,7 @@ ready(() => {
 
   new ClipboardJS("[data-clipboard-text]");
 });
+
+function removeUser(userId) {
+  document.getElementById(`server_user_${userId}_form`).submit();
+}
diff --git a/weblate_web/static/img/ArrowR.png b/weblate_web/static/img/ArrowR.png
new file mode 100644
index 0000000000..6b4faf26ef
Binary files /dev/null and b/weblate_web/static/img/ArrowR.png differ
diff --git a/weblate_web/static/img/Shield.png b/weblate_web/static/img/Shield.png
new file mode 100644
index 0000000000..4b68a15632
Binary files /dev/null and b/weblate_web/static/img/Shield.png differ
diff --git a/weblate_web/static/img/delete.png b/weblate_web/static/img/delete.png
new file mode 100644
index 0000000000..7cd9c54c59
Binary files /dev/null and b/weblate_web/static/img/delete.png differ
diff --git a/weblate_web/static/img/donations-picture.png b/weblate_web/static/img/donations-picture.png
new file mode 100644
index 0000000000..1563dfff4b
Binary files /dev/null and b/weblate_web/static/img/donations-picture.png differ
diff --git a/weblate_web/static/img/dowload.png b/weblate_web/static/img/dowload.png
new file mode 100644
index 0000000000..ab39f4afaa
Binary files /dev/null and b/weblate_web/static/img/dowload.png differ
diff --git a/weblate_web/static/style-rtl.css b/weblate_web/static/style-rtl.css
index 07ac9b60af..f2c61ce1ce 100644
--- a/weblate_web/static/style-rtl.css
+++ b/weblate_web/static/style-rtl.css
@@ -4196,3 +4196,502 @@ input.fullwidth {
     bottom: 12px;
   }
 }
+
+.testimonial {
+  width: 365px;
+  border-radius: 30px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  margin-left: 10px;
+}
+
+.icon-review {
+  text-align: right;
+}
+.icon-review img {
+  margin-right: 50px;
+}
+.icon-review p {
+  margin-right: 35px;
+  margin-top: -25px;
+  width: 70%;
+  font-size: 15px;
+  line-height: 18px;
+  letter-spacing: 0.5px;
+  color: #2a3744;
+}
+
+.circle-user {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: relative;
+  right: 32px;
+  margin-top: 20px;
+}
+.circle-user img {
+  margin: 0px;
+  border-radius: 50%;
+}
+
+.icon-user {
+  display: flex;
+  text-align: right;
+  padding-bottom: 25px;
+}
+.content-user {
+  margin-top: 20px;
+  margin-right: 45px;
+}
+.content-user a {
+  color: #1fa385;
+  line-height: 23px;
+  text-decoration: underline;
+}
+.content-logo {
+  margin: 0px !important;
+}
+
+.slider-slide {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.simple-slider {
+  height: 400px;
+}
+
+.simple-slider .slider-btn.slider-btn-prev {
+  left: 11px !important;
+  background-position: left !important;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1) !important;
+  background: white !important;
+  border-radius: 50% !important;
+  width: 50px !important;
+  height: 50px !important;
+}
+
+.simple-slider .slider-btn.slider-btn-next {
+  right: 4px !important;
+  background-position: right !important;
+  border-radius: 50% !important;
+  width: 50px !important;
+  height: 50px !important;
+  background: white !important;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1) !important;
+}
+
+.simple-slider .slider-btn.slider-btn-next img {
+  padding: 18px;
+  margin: 0px;
+}
+
+.simple-slider .slider-btn.slider-btn-prev img {
+  padding: 18px;
+  margin: 0px;
+}
+
+/* Services CSS */
+
+/* Services CSS (Button Sizes) */
+
+.button-med-140 {
+  min-width: 140px !important;
+  min-height: 50px !important;
+}
+
+.button-med-120 {
+  min-width: 120px !important;
+  min-height: 50px !important;
+}
+
+.med2 {
+  display: none;
+}
+
+.button-med-100 {
+  min-width: 100px !important;
+  min-height: 50px !important;
+}
+.button-med-150 {
+  min-width: 150px !important;
+  min-height: 50px !important;
+}
+
+.button-med-170 {
+  min-width: 170px !important;
+  min-height: 50px !important;
+}
+
+/* Services CSS (More Weblate Grid) */
+
+.inner-grid {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-column-gap: 0px;
+  grid-row-gap: 25px;
+}
+
+.grid-item2 p {
+  color: #2e344b;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 30px;
+}
+
+.grid-item2 t {
+  color: #2e354a;
+  font-size: 16px;
+  letter-spacing: 0;
+  line-height: 10px;
+}
+
+.grid-item1 {
+  padding-top: 5px;
+}
+
+.grid-item2 {
+  padding-right: 15px;
+}
+
+.grid-item3 {
+  padding-top: 5px;
+}
+
+/* Services CSS (Inputs and placeholders) */
+
+input[type="email"] {
+  height: 50px;
+  width: 70%;
+  border-radius: 5px 5px 0 0;
+  background-color: #e9eaec;
+  border-bottom: 2px solid #c4c6cb;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  padding: 13px 5px;
+}
+
+::placeholder {
+  color: #bfc3c7;
+  font-size: 18px;
+  letter-spacing: 0;
+  line-height: 23px;
+  padding-right: 10px;
+}
+
+input.fullwidth {
+  box-sizing: border-box;
+  height: 50px;
+  width: 100%;
+  border: 2px solid #bfc3c7;
+  border-radius: 5px;
+}
+
+/* Services CSS (Users section) */
+
+.user-slot {
+  height: 60px;
+  width: 330px;
+  border: 1px solid #00d2e6;
+  border-radius: 30px;
+  margin-bottom: 10px;
+  opacity: 0.8;
+  position: relative;
+}
+
+.user-slot-content p {
+  color: #1fa385;
+  font-size: 14px;
+  letter-spacing: 0.86px;
+  line-height: 0px !important;
+  padding-bottom: 3px;
+}
+
+.user-slot-content t {
+  color: #2a3744;
+  font-size: 17px;
+  letter-spacing: 0;
+  line-height: 0px !important;
+}
+
+.user-img {
+  position: relative;
+  top: -14px;
+  right: 288px;
+}
+
+.user-slot-content {
+  position: relative;
+  top: 19px;
+  right: 30px;
+}
+
+/* Services CSS (Payments Section) */
+
+.payment-listing {
+  border-bottom: 1px solid #e9eaec;
+}
+
+.payment-listing:last-child {
+  border-bottom: none;
+}
+
+/* Services CSS (Services) */
+
+.service-variant {
+  display: flex;
+  justify-content: space-between;
+  height: 120px;
+  align-items: center;
+}
+.service-variant p {
+  color: #2b3646;
+  font-size: 40px;
+  letter-spacing: -1px;
+  line-height: 44px;
+  padding-right: 40px;
+  padding-top: 10px;
+}
+
+.service-time {
+  display: grid;
+  text-align: center;
+  padding-top: 20px;
+  padding-left: 40px;
+  color: #bfc3c7;
+  font-size: 17px;
+}
+
+/* Services CSS (Custom paddings, styles and margins) */
+
+.bdr-btm {
+  border-bottom: none !important;
+}
+
+.style {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+}
+
+.pt-pb {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+}
+
+.p-top {
+  padding-top: 22px !important;
+}
+
+.service-text-formatting > div {
+  font-size: 18px !important;
+  line-height: 30px !important;
+  color: #2c3548;
+  padding-top: 15x;
+  padding-bottom: 20px;
+}
+
+.user-text-formatting t {
+  font-size: 16px;
+  line-height: 30px;
+  padding-right: 21px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.pl-1 {
+  font-size: 16px;
+  padding-right: 20px;
+}
+
+/* Services CSS (Days check color) */
+
+.grey {
+  color: #bfc3c7 !important;
+  font-size: 16px;
+}
+
+.orange {
+  color: #f6664c !important;
+  font-size: 16px;
+}
+
+/* For change in font size of payments */
+.payment-font-size {
+  font-size: 16px !important;
+}
+
+.payment-font-size a {
+  padding-right: 40px;
+  text-decoration: none !important;
+}
+
+.payment-font-size a img {
+  position: relative;
+  top: 1px;
+  padding-right: 25px;
+}
+
+/* User.html CSS */
+
+/* User.html CSS(Service Title) */
+
+.updated-service-title {
+  direction: ltr;
+}
+
+.updated-service-title span {
+  color: #00a481;
+  font-size: 16px;
+  margin-left: 40.5px;
+}
+
+.updated-service-title span a {
+  color: #00a481;
+  font-size: 16px;
+  letter-spacing: 0;
+  line-height: 20px;
+}
+
+.updated-service-title span img {
+  height: 15px;
+  width: 10px;
+  position: relative;
+  top: 3px;
+  margin-right: 5px;
+}
+
+/* User.html CSS(Donation Box) */
+
+.payment-form-donationbox {
+  height: 100px;
+  width: 100%;
+  max-width: 530px;
+  border-radius: 20px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.payment-form-donationbox a {
+  min-width: 0px;
+}
+
+.line-right-donationbox {
+  font-size: 18px;
+  padding-left: 30px;
+}
+
+/* User.html CSS(Line-left and Line-Right Custom Variants) */
+
+.get-reward-left-line {
+  display: flex;
+  font-size: 40px !important;
+  letter-spacing: -1px;
+  line-height: 44px;
+  width: unset !important;
+  justify-content: space-between;
+  font-weight: unset !important;
+  color: #2c3647;
+}
+
+.donation-left-line {
+  display: flex;
+  justify-content: space-between;
+  border: none;
+  margin-bottom: 20px;
+}
+
+.reward-line-right {
+  color: #3f85ff;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 23px;
+  margin-top: 17px;
+  margin-left: 40px;
+}
+
+.inner-content {
+  display: flex;
+}
+
+.inner-content-child-width {
+  width: 77.84%;
+}
+
+.inner-content-child-width-auto {
+  width: auto;
+}
+
+.inner-content-child-width-auto img {
+  max-height: 267px;
+  max-width: 192px;
+  float: left;
+  -webkit-transform: scaleX(-1);
+}
+
+/* User.html CSS(Custom Styles and Custom Margin and Paddings) */
+
+.payment-padding {
+  padding-bottom: 0px !important;
+}
+
+.user-text-formatting > div {
+  font-size: 18px !important;
+  line-height: 30px !important;
+  color: #2c3548;
+  padding-top: 15x;
+  padding-bottom: 20px;
+}
+
+.user-text-formatting-donation {
+  width: unset !important;
+  margin-left: 0px !important;
+}
+
+.user-text-formatting-donation span {
+  font-weight: bold;
+}
+
+.custom-gradient {
+  height: 20px;
+  background: linear-gradient(180deg, #e9eaec -45%, #ffffff 100%);
+  border: none;
+}
+
+.subscription-note {
+  font-size: 16px;
+  color: #bfc3c7;
+}
+
+.subscription-note span {
+  color: #2c3548 !important;
+}
+
+.user-text-formatting-payment t {
+  font-size: 18px;
+  line-height: 30px;
+  padding-left: 55px !important;
+  padding-right: 0px !important;
+  font-weight: 400 !important;
+  letter-spacing: 0;
+}
+
+.user-text-formatting-payment {
+  height: 86px;
+}
+
+/* User.html CSS(Payments section updated) */
+
+.payment-updated {
+  display: flow-root;
+}
diff --git a/weblate_web/static/style.css b/weblate_web/static/style.css
index f922976cf9..6c933ce14b 100644
--- a/weblate_web/static/style.css
+++ b/weblate_web/static/style.css
@@ -4188,3 +4188,505 @@ input.fullwidth {
     bottom: 12px;
   }
 }
+
+/*Testimonial and Slider CSS*/
+
+.testimonial {
+  width: 365px;
+  border-radius: 30px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  margin-left: 10px;
+}
+
+.icon-review {
+  text-align: left;
+}
+.icon-review img {
+  margin-left: 50px;
+}
+.icon-review p {
+  margin-left: 35px;
+  margin-top: -25px;
+  width: 70%;
+  font-size: 15px;
+  line-height: 18px;
+  letter-spacing: 0.5px;
+  color: #2a3744;
+}
+
+.circle-user {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: relative;
+  left: 32px;
+  margin-top: 20px;
+}
+.circle-user img {
+  margin: 0px;
+  border-radius: 50%;
+}
+
+.icon-user {
+  display: flex;
+  text-align: left;
+  padding-bottom: 25px;
+}
+.content-user {
+  margin-top: 20px;
+  margin-left: 45px;
+}
+.content-user a {
+  color: #1fa385;
+  line-height: 23px;
+  text-decoration: underline;
+}
+.content-logo {
+  margin: 0px !important;
+}
+
+.slider-slide {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.simple-slider {
+  height: 400px;
+}
+
+.simple-slider .slider-btn.slider-btn-prev {
+  left: 11px !important;
+  background-position: left !important;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1) !important;
+  background: white !important;
+  border-radius: 50% !important;
+  width: 50px !important;
+  height: 50px !important;
+}
+
+.simple-slider .slider-btn.slider-btn-next {
+  right: 4px !important;
+  background-position: right !important;
+  border-radius: 50% !important;
+  width: 50px !important;
+  height: 50px !important;
+  background: white !important;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1) !important;
+}
+
+.simple-slider .slider-btn.slider-btn-next img {
+  padding: 18px;
+  margin: 0px;
+}
+
+.simple-slider .slider-btn.slider-btn-prev img {
+  padding: 18px;
+  margin: 0px;
+}
+
+/* Services CSS */
+
+/* Services CSS (Button Sizes) */
+
+.button-med-140 {
+  min-width: 140px !important;
+  min-height: 50px !important;
+}
+
+.button-med-120 {
+  min-width: 120px !important;
+  min-height: 50px !important;
+}
+
+.med2 {
+  display: none;
+}
+
+.button-med-100 {
+  min-width: 100px !important;
+  min-height: 50px !important;
+}
+.button-med-150 {
+  min-width: 150px !important;
+  min-height: 50px !important;
+}
+
+.button-med-170 {
+  min-width: 170px !important;
+  min-height: 50px !important;
+}
+
+/* Services CSS (More Weblate Grid) */
+
+.inner-grid {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-column-gap: 0px;
+  grid-row-gap: 25px;
+}
+
+.grid-item2 p {
+  color: #2e344b;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 30px;
+}
+
+.grid-item2 t {
+  color: #2e354a;
+  font-size: 16px;
+  letter-spacing: 0;
+  line-height: 10px;
+}
+
+.grid-item1 {
+  padding-top: 5px;
+}
+
+.grid-item2 {
+  padding-left: 15px;
+}
+
+.grid-item3 {
+  padding-top: 5px;
+}
+
+/* Services CSS (Inputs and placeholders) */
+
+input[type="email"] {
+  height: 50px;
+  width: 70%;
+  border-radius: 5px 5px 0 0;
+  background-color: #e9eaec;
+  border-bottom: 2px solid #c4c6cb;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  padding: 13px 5px;
+}
+
+::placeholder {
+  color: #bfc3c7;
+  font-size: 18px;
+  letter-spacing: 0;
+  line-height: 23px;
+  padding-left: 10px;
+}
+
+input.fullwidth {
+  box-sizing: border-box;
+  height: 50px;
+  width: 100%;
+  border: 2px solid #bfc3c7;
+  border-radius: 5px;
+}
+
+/* Services CSS (Users section) */
+
+.user-slot {
+  height: 60px;
+  width: 330px;
+  border: 1px solid #00d2e6;
+  border-radius: 30px;
+  margin-bottom: 10px;
+  opacity: 0.8;
+  position: relative;
+}
+
+.user-slot-content p {
+  color: #1fa385;
+  font-size: 14px;
+  letter-spacing: 0.86px;
+  line-height: 0px !important;
+  padding-bottom: 3px;
+}
+
+.user-slot-content t {
+  color: #2a3744;
+  font-size: 17px;
+  letter-spacing: 0;
+  line-height: 0px !important;
+}
+
+.user-img {
+  position: relative;
+  top: -14px;
+  left: 288px;
+}
+
+.user-slot-content {
+  position: relative;
+  top: 19px;
+  left: 30px;
+}
+
+/* Services CSS (Payments Section) */
+
+.payment-listing {
+  border-bottom: 1px solid #e9eaec;
+}
+
+.payment-listing:last-child {
+  border-bottom: none;
+}
+
+/* Services CSS (Services) */
+
+.service-variant {
+  display: flex;
+  justify-content: space-between;
+  height: 120px;
+  align-items: center;
+}
+.service-variant p {
+  color: #2b3646;
+  font-size: 40px;
+  letter-spacing: -1px;
+  line-height: 44px;
+  padding-left: 40px;
+  padding-top: 10px;
+}
+
+.service-time {
+  display: grid;
+  text-align: center;
+  padding-top: 20px;
+  padding-right: 40px;
+  color: #bfc3c7;
+  font-size: 17px;
+}
+
+/* Services CSS (Custom paddings, styles and margins) */
+
+.bdr-btm {
+  border-bottom: none !important;
+}
+
+.style {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+}
+
+.pt-pb {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+}
+
+.p-top {
+  padding-top: 22px !important;
+}
+
+.service-text-formatting > div {
+  font-size: 18px !important;
+  line-height: 30px !important;
+  color: #2c3548;
+  padding-top: 15x;
+  padding-bottom: 20px;
+}
+
+.user-text-formatting t {
+  font-size: 16px;
+  line-height: 30px;
+  padding-left: 21px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.pl-1 {
+  font-size: 16px;
+  padding-left: 20px;
+}
+
+/* Services CSS (Days check color) */
+
+.grey {
+  color: #bfc3c7 !important;
+  font-size: 16px;
+}
+
+.orange {
+  color: #f6664c !important;
+  font-size: 16px;
+}
+
+/* For change in font size of payments */
+.payment-font-size {
+  font-size: 16px !important;
+}
+
+.payment-font-size a {
+  padding-left: 40px;
+  text-decoration: none !important;
+}
+
+.payment-font-size a img {
+  position: relative;
+  top: 1px;
+  padding-left: 25px;
+}
+
+/* User.html CSS */
+
+/* User.html CSS(Service Title) */
+
+.updated-service-title span {
+  color: #00a481;
+  font-size: 16px;
+  margin-left: 40.5px;
+}
+
+.updated-service-title span a {
+  color: #00a481;
+  font-size: 16px;
+  letter-spacing: 0;
+  line-height: 20px;
+}
+
+.updated-service-title span img {
+  height: 15px;
+  width: 10px;
+  position: relative;
+  top: 3px;
+  margin-left: 5px;
+}
+
+/* User.html CSS(Donation Box) */
+
+.payment-form-donationbox {
+  height: 100px;
+  width: 100%;
+  max-width: 530px;
+  border-radius: 20px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.payment-form-donationbox a {
+  min-width: 0px;
+}
+
+.line-right-donationbox {
+  font-size: 18px;
+  padding-right: 30px;
+}
+
+/* User.html CSS(Line-left and Line-Right Custom Variants) */
+
+.get-reward-left-line {
+  display: flex;
+  font-size: 40px !important;
+  letter-spacing: -1px;
+  line-height: 44px;
+  width: unset !important;
+  justify-content: space-between;
+  font-weight: unset !important;
+  color: #2c3647;
+}
+
+.donation-left-line {
+  display: flex;
+  justify-content: space-between;
+  border: none;
+  margin-bottom: 20px;
+}
+
+.reward-line-right {
+  color: #3f85ff;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 23px;
+  margin-top: 17px;
+  margin-right: 40px;
+}
+
+.inner-content {
+  display: flex;
+}
+
+.inner-content-child-width {
+  width: 77.84%;
+}
+
+.inner-content-child-width-auto {
+  width: auto;
+}
+
+.inner-content-child-width-auto img {
+  max-height: 267px;
+  max-width: 192px;
+  float: right;
+}
+
+/* User.html CSS(Custom Styles and Custom Margin and Paddings) */
+
+.payment-padding {
+  padding-bottom: 0px !important;
+}
+
+.user-text-formatting > div {
+  font-size: 18px !important;
+  line-height: 30px !important;
+  color: #2c3548;
+  padding-top: 15x;
+  padding-bottom: 20px;
+}
+
+.user-text-formatting-donation {
+  width: unset !important;
+  margin-right: 0px !important;
+}
+
+.user-text-formatting-donation span {
+  font-weight: bold;
+}
+
+.custom-gradient {
+  height: 20px;
+  background: linear-gradient(180deg, #e9eaec -45%, #ffffff 100%);
+  border: none;
+}
+
+.subscription-note {
+  font-size: 16px;
+  color: #bfc3c7;
+}
+
+.subscription-note span {
+  color: #2c3548 !important;
+}
+
+.user-text-formatting-payment t {
+  font-size: 18px;
+  line-height: 30px;
+  padding-left: 0px !important;
+  padding-right: 55px;
+  font-weight: 400 !important;
+  letter-spacing: 0;
+}
+
+.user-text-formatting-payment {
+  height: 86px;
+}
+
+/* User.html CSS(Payments section updated) */
+
+.payment-updated {
+  display: flow-root;
+}
+
+/* bottom.html CSS(Donation Box Adjustment) */
+
+.donation-box-updated {
+  display: flex;
+}
diff --git a/weblate_web/templates/service.html b/weblate_web/templates/service.html
index 4e8c9b88fd..88ac7d6bc1 100644
--- a/weblate_web/templates/service.html
+++ b/weblate_web/templates/service.html
@@ -1,8 +1,8 @@
 {% extends "base.html" %}
 {% load i18n %}
-
-{% block title %}{% trans "Service" %}{% endblock %}
-
+{% block title %}
+{% trans "Service" %}
+{% endblock %}
 {% block content %}
 <section class="content">
     <div class="row">
diff --git a/weblate_web/templates/snippets/bottom.html b/weblate_web/templates/snippets/bottom.html
index b767d37321..9db3bf9a23 100644
--- a/weblate_web/templates/snippets/bottom.html
+++ b/weblate_web/templates/snippets/bottom.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 <section class="bottom {{ extra_css }}">
-    <div class="row">
+    <div class="row donation-box-updated">
         <div class="flex">
         {% include "snippets/box-join.html" %}
         {% include "snippets/box-donate.html" %}
diff --git a/weblate_web/templates/snippets/payment.html b/weblate_web/templates/snippets/payment.html
index 5d5a301c36..f3867b90ef 100644
--- a/weblate_web/templates/snippets/payment.html
+++ b/weblate_web/templates/snippets/payment.html
@@ -1,33 +1,35 @@
 {% load i18n %}
 {% load humanize %}
-<div class="payment-listing">
-    <div class="float-right">
-        {{ payment.get_amount_display|intcomma }} {{ payment.get_currency_display }}
-    </div>
-    {{ payment.description }}<br />
+{% load date_diff %}
+{% load static %}
 
-    {% if payment.invoice %}
-        <div class="float-right">
-            {% if payment.invoice_filename_valid %}
-                <a href="{% url 'user-invoice' pk=payment.pk %}" class="link">{{ payment.invoice_filename }}</a>
-            {% else %}
-                {{ payment.invoice_filename }}
-            {% endif %}
-        </div>
-    {% elif payment.state != 5 %}
-        <div class="float-right">
-            {% if payment.is_waiting_for_user %}
-                <a class="link" href="{{ payment.get_absolute_url }}">{{ payment.get_state_display }}</a>
-            {% elif payment.details.reject_reason %}
-                {{ payment.get_state_display }}: {{ payment.details.reject_reason }}
-            {% else %}
-                {{ payment.get_state_display }}
-            {% endif %}
-        </div>
-    {% endif %}
 
+<div class="payment-listing">
+    <div class="float-right payment-font-size">
+        {{ payment.get_amount_display|intcomma }} {{ payment.get_currency_display }}<span>
+            {% if payment.invoice %}
+            <div class="float-right payment-font-size">
+                <a href="{% url 'user-invoice' pk=payment.pk %}" class="link">{{ payment.invoice_filename }}<span><img src="{% static "img/dowload.png" %}" alt=">" /></span></a>
+            </div>
+            {% elif payment.state != 5 %}
+            <div class="float-right">
+                {% if payment.is_waiting_for_user %}
+                    <a class="link" href="{{ payment.get_absolute_url }}">{{ payment.get_state_display }}</a>
+                {% elif payment.details.reject_reason %}
+                    {{ payment.get_state_display }}: {{ payment.details.reject_reason }}
+                {% else %}
+                    {{ payment.get_state_display }}
+                {% endif %}
+            </div>
+            {% endif %}</span>
+    </div>
+    {{ payment.description }} <em>—</em><span> {% if payment.end|days_diff_from_today < 365 %}
+        <t>{% trans "monthly" %}</t>
+        {% else %}
+        <t>{% trans "yearly" %}</t>
+        {% endif %}</span> <br />
     {% if payment.start %}
-        {% blocktrans with created=payment.start|date:"SHORT_DATE_FORMAT" expires=payment.end|date:"SHORT_DATE_FORMAT" context "Date range" %}{{ created }}–{{ expires }}{% endblocktrans %}
+        <div class="payment-font-size">{% blocktrans with created=payment.start|date:"d M Y" expires=payment.end|date:"d M Y" context "Date range" %}{{ created }}<em>—</em>{{ expires }}{% endblocktrans %}</div>
     {% endif %}
     <div class="clear"></div>
 </div>
diff --git a/weblate_web/templates/snippets/service.html b/weblate_web/templates/snippets/service.html
index 1ca44320ae..d54f2f43bc 100644
--- a/weblate_web/templates/snippets/service.html
+++ b/weblate_web/templates/snippets/service.html
@@ -1,94 +1,154 @@
 {% load i18n %}
+{% load static %}
+{% load date_diff %}
 
-            <div class="payment-form">
-                <div class="form-line">
-                    <div class="line-left">{% trans "Service" %}</div>
+<div class="payment-form pt-pb">
+    <div class="form-line service-text-formatting bdr-btm">
+        <div class="service-variant">
+            <p>{{ service.get_status_display }}</p>
+        <div class="service-time">
+            {% with subscriptions=service.subscription_set.all %}
+            {% for subscription in subscriptions %}
+            {% with days_from_today=subscription.expires|days_diff_from_today %}
+            {% if days_from_today < 30 %}
+            {% if days_from_today < 2 and days_from_today >= 0 %}
+            <t class="orange">{{ days_from_today}} {% trans "day remaining" %}</t>
+            {% elif days_from_today < 0  %}
+            <t class="orange">{% trans "Expired" %}</t>
+            {% else %}
+            <t class="orange">{{ days_from_today}} {% trans "days remaining" %}</t>
+            {% endif %}
+            {% else %}
+            <t class="grey">{{ days_from_today}} {% trans "days remaining" %}</t>
+            {% endif %}
+            {% endwith %}
+            {% endfor %}
+            {% endwith %}
+        </div>
+        </div>
+    </div>
+                <div class="form-line clearr"></div>
+
+                <div class="form-line service-text-formatting">
+                    <div class="line-left">{% trans "Users" %}</div>
                     <div class="line-right">
-                        {{ service.get_status_display }}
-                        {% if not service.check_in_limits %}
-                        <div class="alert error">
-                        {% trans "Exceeds selected service offering." %}
-                        </div>
-                        {% endif %}
+                    {% for owner in service.users.all %}
+                    <form id="server_user_{{owner.id}}_form" method="post" action="{% url 'service-user' pk=service.pk %}">
+                    <div class="user-slot">
+                        <div class="user-slot-content">
+                        <p>{{ owner.last_name }}</p>
+                    <t>{{ owner.email }}</t></div>
+                    {% if owner == user %}
+                    <div class="user-img"><img src="{% static "img/Shield.png" %}" alt="Shield"></div>
+                    {% else %}
+                    {% csrf_token %}
+                    <img class="user-img" onclick="removeUser('{{owner.id}}')" name="remove" value="remove" src="{% static "img/delete.png" %}">
+                    {% endif %}
+                </div>
+                    {% csrf_token %}
+                    {% if owner != user %}
+                    <input type="hidden" name="email" value="{{ owner.email }}" />
+                    <input type="hidden" class="" name="remove" value="{% trans "Remove" %}" />
+                    {% endif %}
+                    </form>
+                    {% endfor %}
+                    <form method="post" action="{% url 'service-user' pk=service.pk %}">
+                    {% csrf_token %}
+                    <input type="email" placeholder="{% trans "Invite e-mail" %}" name="email" />
+                    <input type="submit" class="button button-med-120 inline border rev" value="{% trans "Add user" %}" />
+                    </form>
                     </div>
                     <div class="clear"></div>
                 </div>
+
                 {% if service.needs_token %}
-                <div class="form-line">
-                    <div class="line-left">{% trans "Activation token" %}</div>
+                <div class="form-line service-text-formatting bdr-btm">
+                    <div class="line-left p-top">{% trans "Activation token" %}</div>
                     <div class="line-right">
                         <input value="{{ service.secret }}" readonly class="fullwidth"><br />
-                        <a class="button small inline" data-clipboard-text="{{ service.secret }}">{% trans "Copy" %}</a>
+                        <a class="button button-med-100 inline" data-clipboard-text="{{ service.secret }}">{% trans "Copy" %}</a>
                         <form class="form-inline" method="post" action="{% url "service-token" pk=service.pk %}">
                         {% csrf_token %}
-                        <input type="submit" class="button small inline border rev" value="{% trans "Regenerate" %}">
+                        <input type="submit" class="button button-med-150 inline border rev" value="{% trans "Refresh token" %}">
                         </form>
                     </div>
                     <div class="clear"></div>
                 </div>
                 {% endif %}
                 {% if service.backup_repository %}
-                <div class="form-line">
-                    <div class="line-left">{% trans "Backup repository" %}</div>
+                <div class="form-line service-text-formatting bdr-btm">
+                    <div class="line-left p-top">{% trans "Backup repository" %}</div>
                     <div class="line-right">
                         <input value="{{ service.backup_repository }}" readonly class="fullwidth"><br />
-                        <a class="button small inline" data-clipboard-text="{{ service.backup_repository }}">{% trans "Copy" %}</a>
-                        <a class="button small inline border rev" href="https://docs.weblate.org/en/latest/admin/backup.html#cloudbackup">{% trans "Documentation" %}</a>
+                        <a class="button button-med-100 inline" data-clipboard-text="{{ service.backup_repository }}">{% trans "Copy" %}</a>
+                        <a class="button button-med-170 inline border rev" href="https://docs.weblate.org/en/latest/admin/backup.html#cloudbackup">{% trans "Documentation" %}</a>
                     </div>
                     <div class="clear"></div>
                 </div>
                 {% endif %}
-                <div class="form-line">
+                <div class="form-line service-text-formatting">
                     <div class="line-left">{% trans "Server URL" %}</div>
                     <div class="line-right">
                 {% if service.last_report %}
                         <a class="link" href="{{ service.last_report.site_url }}">{{ service.last_report.site_title|default:"Weblate" }}</a>
                 {% else %}
                         <p class="text-muted">
-                            {% trans "Use an activation token to connect your Weblate installation to the support portal. This step is optional, you can use support services without it as well." %}
-                            <a href="https://docs.weblate.org/en/latest/admin/support.html" class="link">{% trans "See documentation on subscription management." %}</a>
+                            {% trans "You can use use support services on our webite. Or, for more comfort, use an activation token to connect your Weblate installation to the support portal. More in " %}
+                            <a href="https://docs.weblate.org/en/latest/admin/support.html" class="link">{% trans "Documentation." %}</a>
                         </p>
                 {% endif %}
                     </div>
                     <div class="clear"></div>
                 </div>
-                {% if service.note %}
-                <div class="form-line">
-                    <div class="line-left">{% trans "Note" %}</div>
-                    <div class="line-right">
-                        <p>{{ service.note }}</p>
-                    </div>
-                    <div class="clear"></div>
-                </div>
-                {% endif %}
                 {% with subscriptions=service.subscription_set.all %}
                 {% for subscription in subscriptions %}
-                    <div class="form-line">
+                    <div class="form-line service-text-formatting">
                         <div class="line-left">{% trans "Subscription" %}</div>
                         <div class="line-right">
-                            <strong>{{ subscription.get_package_display }}</strong>
+                            <p>{{ subscription.get_package_display }} <em>—</em>
+                                {% with days_from_today=subscription.expires|days_diff_from_today %}
+                                {% if days_from_today < 365 %}
+                                <span>{% trans "monthly" %}</span>
+                                {% else %}
+                                <span>{% trans "yearly" %}</span>
+                                {% endif %}</p>
+                                {% endwith %}
+                            <t>{{ subscription.created|date:"d M Y" }}<em>—</em><strong>{{ subscription.expires|date:"d M Y" }}</strong>
+                                <span>
+                                    {% with days_from_today=subscription.expires|days_diff_from_today %}
+                                    {% if days_from_today < 30 %}
+                                    {% if days_from_today < 2 and days_from_today >= 0 %}
+                                    <t class="pl-1 orange">{{ days_from_today}} {% trans "day remaining" %}</t>
+                                    {% elif days_from_today < 0  %}
+                                    <t class="pl-1 orange">Expired</t>
+                                    {% else %}
+                                    <t class="pl-1 orange">{{ days_from_today}} {% trans "days remaining" %}</t>
+                                    {% endif %}
+                                    {% else %}
+                                    <t class="pl-1 grey">{{ days_from_today}} {% trans "days remaining" %}</t>
+                                    {% endif %}
+                                    {% endwith %}
+                                </span>
+                            </t>
+                            <br>
+                            {% if service.note %}
+                            <v class="subscription-note">{% trans "Note" %}:
+                                <span>
+                                    {{ service.note }}
+                                </span>
+                            </v>
+                            {% endif %}
+
                             {% if service.status == "shared" %}
                             <a class="button small inline" href="https://hosted.weblate.org/create/billing/?billing={{ service.hosted_billing }}&amp;upgrade=1">{% trans "Change plan" %}</a>
                             {% endif %}
                         </div>
                         <div class="clear"></div>
                     </div>
+
                     {% if subscription.get_repeat %}
-                    <div class="form-line">
-                        <div class="line-left">{% trans "Validity" %}</div>
-                        <div class="line-right">{% blocktrans with created=subscription.created|date:"SHORT_DATE_FORMAT" expires=subscription.expires|date:"SHORT_DATE_FORMAT" context "Date range" %}{{ created }}–{{ expires }}{% endblocktrans %}</div>
-                        <div class="clear"></div>
-                    </div>
-                    {% else %}
-                    <div class="form-line">
-                        <div class="line-left">{% trans "Creation date" %}</div>
-                        <div class="line-right">{{ subscription.created|date:"SHORT_DATE_FORMAT" }}</div>
-                        <div class="clear"></div>
-                    </div>
-                    {% endif %}
-                    {% if subscription.get_repeat %}
-                    <div class="form-line">
-                        <div class="line-left">{% trans "State" %}</div>
+                    <div class="form-line service-text-formatting">
+                        <div class="line-left">{% trans "Billing" %}</div>
                         <div class="line-right">
                             {% if not subscription.active %}
                             {% trans "Expired" %}
@@ -101,7 +161,7 @@
                             {% csrf_token %}
                             <input type="submit" class="button small inline" value="{% trans "Renew now" %}">
                             {% if subscription.yearly_package %}
-                            <input type="submit" class="button small inline" value="{% trans "Switch to yearly" %}" name="switch_yearly">
+                            <input type="submit" class="button small inline" value="{% trans "Upgrade to annual" %}" name="switch_yearly"><span>{% trans "and" %}<strong>{% trans "save 20%" %}/strong></span>
                             {% endif %}
                             </form>
                             {% if subscription.payment_obj.recurring %}
@@ -115,7 +175,7 @@
                     </div>
                     {% endif %}
                 {% endfor %}
-                <div class="form-line">
+                <div class="form-line service-text-formatting">
                     <div class="line-left">{% trans "Payments" %}</div>
                     <div class="line-right">
                     {% for subscription in subscriptions %}
@@ -127,36 +187,27 @@
                     <div class="clear"></div>
                 </div>
                 {% endwith %}
-                <div class="form-line">
-                    <div class="line-left">{% trans "Users" %}</div>
-                    <div class="line-right">
-                    {% for owner in service.users.all %}
-                    <form method="post" action="{% url 'service-user' pk=service.pk %}">
-                    {{ owner.last_name }} &lt;{{ owner.email }}&gt;
-                    {% csrf_token %}
-                    {% if owner != user %}
-                    <input type="hidden" name="email" value="{{ owner.email }}" />
-                    <input type="submit" class="button small inline border rev" name="remove" value="{% trans "Remove" %}" />
-                    {% endif %}
-                    </form>
-                    {% endfor %}
-                    <form method="post" action="{% url 'service-user' pk=service.pk %}">
-                    {% csrf_token %}
-                    <input type="email" placeholder="{% trans "E-mail" %}" name="email" />
-                    <input type="submit" class="button small inline" value="{% trans "Add" %}" />
-                    </form>
-                    </div>
-                    <div class="clear"></div>
-                </div>
-                <div class="form-line">
-                    <div class="line-left">{% trans "Get more services" %}</div>
+
+                <div class="form-line service-text-formatting">
+                    <div class="line-left">{% trans "More Weblate" %}</div>
                     <div class="line-right">
-                        {% for package, name in service.get_suggestions %}
-                        <a class="button small inline" href="{% url 'subscription-new' %}?plan={{ package }}&amp;service={{ service.pk }}">{{ name }}</a>
+                        <div class="inner-grid">
+                        {% for package, name, desc, image, text in service.get_suggestions %}
+                        <div class="grid-item1">
+                            <img src="{% static image %}" alt="logo">
+                        </div>
+                        <div class="grid-item2">
+                            <p>{{ name }}</p>
+                            <t>{{ desc }}</t>
+                        </div>
+                        <div class="grid-item3">
+                        <a class="button med inline" href="{% url 'subscription-new' %}?plan={{ package }}&amp;service={{ service.pk }}">{{ text }}</a>
+                        </div>
                         {% empty %}
-                        {% trans "Congratulations, your Weblate instance is fully covered." %}
+                        {% trans "Congratulations, You are fully covered." %}
                         {% endfor %}
                     </div>
-                    <div class="clear"></div>
                 </div>
+                </div>
+                <div class="clear"></div>
             </div>
diff --git a/weblate_web/templates/user.html b/weblate_web/templates/user.html
index 97646160bb..01c3d3d3f7 100644
--- a/weblate_web/templates/user.html
+++ b/weblate_web/templates/user.html
@@ -1,9 +1,12 @@
 {% extends "base.html" %}
 {% load i18n %}
-
+{% load static %}
+{% load date_diff %}
 {% block title %}{% trans "User profile at Weblate" %}{% endblock %}
 
 {% block content %}
+
+
 <section class="content">
     <div class="row">
         <div class="wrap">
@@ -14,47 +17,56 @@ <h1 class="section-title min-m">{% trans "User profile" %}</h1>
             </div>
             {% with services=user.service_set.all %}
             {% if services %}
-            <h1>{% trans "Your services" %}</h1>
+            <div class="updated-service-title">
+                <h1>{% trans "My services" %}<span><a href="https://hosted.weblate.org/accounts/profile/">{% trans "See user profile " %}<img src="{% static "img/ArrowR.png" %}" alt=">" /></a></span></h1>
+            </div>
             {% for service in services %}
-                {% include "snippets/service.html" %}
+            {% include "snippets/service.html" %}
             {% endfor %}
             {% endif %}
             {% endwith %}
 
-            <h1>{% trans "Your donations" %}</h1>
+            <h1>{% trans "My donations" %}</h1>
 
             {% for donation in user.donation_set.all %}
-            <div class="payment-form">
-                <div class="form-line">
-                    <div class="line-left">{% trans "Creation date" %}</div>
-                    <div class="line-right">{{ donation.created|date:"SHORT_DATE_FORMAT" }}</div>
-                    <div class="clear"></div>
-                </div>
-                <div class="form-line">
-                    <div class="line-left">{% trans "Reward" %}</div>
-                    <div class="line-right">
-                        {{ donation.get_reward_display }}
-                        {% if donation.reward %}
-                        <a class="button small inline" href="{% url "donate-edit" pk=donation.pk %}">{% trans "Edit reward" %}</a>
-                        {% endif %}
-                    </div>
-                    <div class="clear"></div>
+            <div class="payment-form payment-padding">
+                <div class="form-line donation-left-line">
+                    <div class="line-left get-reward-left-line">{{ donation.get_reward_display }}</div>
+                    <div class="reward-line-right">{% trans "Your reward" %}</div>
                 </div>
+                <div class="form-line custom-gradient"></div>
+                <div class="inner-content">
+                    <div class="inner-content-child-width">
                 {% if donation.link_url %}
-                <div class="form-line">
-                    <div class="line-left">{% trans "Link URL" %}</div>
-                    <div class="line-right">{{ donation.link_url }}</div>
+                <div class="form-line user-text-formatting">
+                    <div class="line-left">{% trans "Link" %}</div>
+                    <div class="line-right user-text-formatting-donation">{{ donation.link_url }}</div>
                     <div class="clear"></div>
                 </div>
                 {% endif %}
-                <div class="form-line">
-                    <div class="line-left">{% trans "Expiry date" %}</div>
-                    <div class="line-right">{{ donation.expires|date:"SHORT_DATE_FORMAT" }}</div>
+                <div class="form-line user-text-formatting">
+                    <div class="line-left">{% trans "Active" %}</div>
+                    <div class="line-right user-text-formatting-donation">{{ donation.expires|date:"d M Y"  }}<em>—</em><span>{{ donation.created|date:"d M Y"  }}</span>
+                        {% with days_from_today_donation=donation.expires|days_diff_from_today %}
+                        {% if days_from_today_donation < 30 %}
+                        {% if days_from_today_donation < 2 and days_from_today_donation >= 0 %}
+                        <t class="orange">{{ days_from_today_donation}} {% trans "day remaining" %}</t>
+                        {% elif days_from_today_donation < 0  %}
+                        <t class="pl-1 orange">{% trans "Expired" %}</t>
+                        {% else %}
+                        <t class="orange">{{ days_from_today_donation}} {% trans "days remaining" %}</t>
+                        {% endif %}
+                        {% else %}
+                        <t class="grey">{{ days_from_today_donation}} {% trans "days remaining" %}</t>
+                        {% endif %}
+                        {% endwith %}
+                    </div>
                     <div class="clear"></div>
                 </div>
-                <div class="form-line">
-                    <div class="line-left">{% trans "State" %}</div>
-                    <div class="line-right">
+                <div class="form-line user-text-formatting">
+                    <div class="line-left"></div>
+
+                    <div class="line-right user-text-formatting-donation">
                         {% if not donation.active %}
                         {% trans "Expired" %}
                         {% elif donation.payment_obj.recurring %}
@@ -64,38 +76,40 @@ <h1>{% trans "Your donations" %}</h1>
                         {% endif %}
                         <form class="form-inline" method="post" action="{% url "donate-pay" pk=donation.pk %}">
                         {% csrf_token %}
-                        <input type="submit" class="button small inline" value="{% trans "Renew now" %}">
+                        <input type="submit" class="button button-med-140 inline" value="{% trans "Renew now" %}">
                         </form>
                         {% if donation.active and donation.payment_obj.recurring %}
                         <form class="form-inline" method="post" action="{% url "donate-disable" pk=donation.pk %}">
                         {% csrf_token %}
-                        <input type="submit" class="button small inline" value="{% trans "Turn off renewal" %}">
+                        <input type="submit" class="button button-med-140 inline" value="{% trans "Turn off renewal" %}">
                         </form>
                         {% endif %}
                     </div>
                     <div class="clear"></div>
                 </div>
-                <div class="form-line">
-                    <div class="line-left">{% trans "Payments" %}</div>
-                    <div class="line-right">
-                    {% for payment in donation.list_payments %}
-                    {% include "snippets/payment.html" %}
-                    {% endfor %}
                     </div>
-                    <div class="clear"></div>
+            <div class="inner-content-child-width-auto">
+                <img src="{% static "img/donations-picture.png" %}" alt="Puppy">
+            </div>
+            </div>
+            <div class="payment-updated">
+            <div class="form-line user-text-formatting user-text-formatting-payment">
+                <div class="line-left">{% trans "Payments" %}</div>
+                <div class="line-right ">
+                {% for payment in donation.list_payments %}
+                {% include "snippets/payment.html" %}
+                {% endfor %}
                 </div>
-                <div class="payment-pick">
                 </div>
             </div>
+            </div>
             {% empty %}
-            <div class="payment-form">
-                <div class="form-line">
-                    <div class="line-right">{% trans "Donate to see a nice message here." %}</div>
-                    <div class="clear"></div>
-                </div>
-                <div class="payment-pick">
-                </div>
-                <a class="button center" href="{% url "donate" %}">{% trans "Donate" %}</a>
+
+                <div class="payment-form-donationbox">
+
+                    <div class="line-right-donationbox">{% trans "Wanna see a nice message here?" %}</div>
+
+                <a class="button" href="{% url "donate" %}">{% trans "Donate now" %}</a>
             </div>
             {% endfor %}
         </div>
diff --git a/weblate_web/templatetags/date_diff.py b/weblate_web/templatetags/date_diff.py
new file mode 100644
index 0000000000..58884d2a86
--- /dev/null
+++ b/weblate_web/templatetags/date_diff.py
@@ -0,0 +1,9 @@
+from django.template import Library
+from django.utils import timezone
+
+register = Library()
+
+
+@register.filter
+def days_diff_from_today(end):
+    return (end - timezone.now()).days + 1
diff --git a/weblate_web/tests.py b/weblate_web/tests.py
index fa1f800673..7af87bfddc 100644
--- a/weblate_web/tests.py
+++ b/weblate_web/tests.py
@@ -634,7 +634,7 @@ def test_your_donations(self):
             expires=timezone.now() + relativedelta(years=1),
             payment=self.create_payment()[0].pk,
         )
-        self.assertContains(self.client.get(reverse("user")), "Your donations")
+        self.assertContains(self.client.get(reverse("user")), "My donations")
 
     def test_link(self):
         self.create_donation()