diff --git a/.gitignore b/.gitignore
index ee19e7a0aa..8c79714d9c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,5 @@
 /saml/saml.key
 /saml/saml.crt
 /saml/local_metadata.xml
+.idea
+venv
diff --git a/weblate_web/static/style-rtl.css b/weblate_web/static/style-rtl.css
index 2e1ba7c897..07ac9b60af 100644
--- a/weblate_web/static/style-rtl.css
+++ b/weblate_web/static/style-rtl.css
@@ -1168,11 +1168,21 @@ section.bottom .box.join {
   background-image: url("img/box-join.jpg");
 }
 
+section.bottom .box.join a {
+  position: absolute;
+  bottom: 40px;
+}
+
 section.bottom .box.donate {
   background-color: #f6664c;
   background-image: url("img/box-donate.jpg");
 }
 
+section.bottom .box.donate a {
+  position: absolute;
+  bottom: 40px;
+}
+
 section.bottom .box .title {
   font-size: 40px;
   letter-spacing: -1px;
@@ -1189,7 +1199,7 @@ section.bottom .box p {
   font-size: 20px;
   letter-spacing: 0.5px;
   line-height: 25px;
-  margin-bottom: 45px;
+  margin-bottom: 70px;
 }
 
 body.light .main-menu ul li a {
@@ -2253,10 +2263,6 @@ input[type="radio"]:checked + .biglabel {
   line-height: 26px;
 }
 
-.installations .box:nth-child(2) {
-  min-height: 500px;
-}
-
 .installations .box:nth-child(2n + 1) {
   margin-right: 0;
 }
@@ -2276,9 +2282,9 @@ input[type="radio"]:checked + .biglabel {
 .installations .box ul {
   margin: 0 25px 20px 0;
   max-width: 380px;
-  padding: 0;
   list-style: none;
   clear: right;
+  padding-bottom: 32px;
 }
 
 .installations .box li::before,
@@ -2668,6 +2674,7 @@ h2.section-title.hp-style {
   margin: 0 25px 35px 0;
   padding: 0;
   list-style: none;
+  padding-bottom: 40px;
 }
 
 .contribution-list .box ul li,
@@ -2758,6 +2765,13 @@ h2.section-title.hp-style {
 .aboutus-list .box.blue {
   background-color: #00d2e6;
   border-radius: 20px 20px 20px 0;
+  display: inline-block !important;
+  min-height: unset;
+}
+
+.aboutus-list .box.green {
+  display: inline-block !important;
+  min-height: unset;
 }
 
 .aboutus-list .box h2 {
@@ -3075,6 +3089,7 @@ input.button.make-payment {
 
 .form-line:last-child {
   border-bottom: none;
+  border-top: 1px solid #e9eaec;
 }
 
 .form-line > div {
@@ -4032,7 +4047,7 @@ input.fullwidth {
   }
 }
 
-/* Your Weblate Team - About Us */
+/* About Us Weblate Team */
 
 .content-p {
   width: 69%;
@@ -4062,7 +4077,7 @@ input.fullwidth {
 
 .weblate-team {
   display: table;
-  width: 82%;
+  width: 78%;
   margin: 0 auto;
 }
 
@@ -4100,3 +4115,84 @@ input.fullwidth {
     text-align: center;
   }
 }
+
+/* Flex property for boxes */
+
+.flex {
+  display: flex;
+}
+
+/* Box display flow root property */
+
+.box {
+  display: flow-root !important;
+  position: relative;
+}
+
+/* Box bottom left and right button custom position */
+
+.bottom-left {
+  position: absolute;
+  bottom: 40px;
+}
+
+.bottom-right {
+  position: absolute;
+  bottom: 40px;
+  left: 40px;
+}
+
+/* Media Queries for responsiveness */
+
+@media screen and (max-width: 891px) {
+  .flex {
+    display: unset;
+  }
+}
+
+@media screen and (max-width: 550px) {
+  .bottom-right {
+    position: unset;
+    bottom: unset;
+    left: unset;
+  }
+
+  .installations .box ul,
+  .mailing .box ul {
+    padding-bottom: unset;
+  }
+
+  .bottom-left {
+    position: unset;
+    bottom: unset;
+  }
+}
+
+@media screen and (max-width: 650px) {
+  section.bottom .box p {
+    margin-bottom: 100px;
+  }
+
+  section.bottom .box.donate a {
+    bottom: 30px;
+  }
+
+  section.bottom .box.join a {
+    bottom: 30px;
+  }
+}
+
+@media screen and (max-width: 1030px) and (min-width: 892px) {
+  .installations .box ul,
+  .mailing .box ul {
+    padding-bottom: 50px;
+  }
+
+  .bottom-left {
+    bottom: 60px;
+  }
+
+  .bottom-right {
+    bottom: 12px;
+  }
+}
diff --git a/weblate_web/static/style.css b/weblate_web/static/style.css
index f0667773c8..f922976cf9 100644
--- a/weblate_web/static/style.css
+++ b/weblate_web/static/style.css
@@ -1168,11 +1168,21 @@ section.bottom .box.join {
   background-image: url("img/box-join.jpg");
 }
 
+section.bottom .box.join a {
+  position: absolute;
+  bottom: 40px;
+}
+
 section.bottom .box.donate {
   background-color: #f6664c;
   background-image: url("img/box-donate.jpg");
 }
 
+section.bottom .box.donate a {
+  position: absolute;
+  bottom: 40px;
+}
+
 section.bottom .box .title {
   font-size: 40px;
   letter-spacing: -1px;
@@ -1189,7 +1199,7 @@ section.bottom .box p {
   font-size: 20px;
   letter-spacing: 0.5px;
   line-height: 25px;
-  margin-bottom: 45px;
+  margin-bottom: 70px;
 }
 
 body.light .main-menu ul li a {
@@ -2253,10 +2263,6 @@ input[type="radio"]:checked + .biglabel {
   line-height: 26px;
 }
 
-.installations .box:nth-child(2) {
-  min-height: 500px;
-}
-
 .installations .box:nth-child(2n + 1) {
   margin-left: 0;
 }
@@ -2276,9 +2282,9 @@ input[type="radio"]:checked + .biglabel {
 .installations .box ul {
   margin: 0 0 20px 25px;
   max-width: 380px;
-  padding: 0;
   list-style: none;
   clear: left;
+  padding-bottom: 32px;
 }
 
 .installations .box li::before,
@@ -2668,6 +2674,7 @@ h2.section-title.hp-style {
   margin: 0 0 35px 25px;
   padding: 0;
   list-style: none;
+  padding-bottom: 40px;
 }
 
 .contribution-list .box ul li,
@@ -2758,6 +2765,13 @@ h2.section-title.hp-style {
 .aboutus-list .box.blue {
   background-color: #00d2e6;
   border-radius: 20px 20px 0 20px;
+  display: inline-block !important;
+  min-height: unset;
+}
+
+.aboutus-list .box.green {
+  display: inline-block !important;
+  min-height: unset;
 }
 
 .aboutus-list .box h2 {
@@ -3075,6 +3089,7 @@ input.button.make-payment {
 
 .form-line:last-child {
   border-bottom: none;
+  border-top: 1px solid #e9eaec;
 }
 
 .form-line > div {
@@ -4024,7 +4039,7 @@ input.fullwidth {
   }
 }
 
-/*Your Weblate Team - About us */
+/* About Us Weblate Team CSS */
 
 .content-p {
   width: 69%;
@@ -4054,7 +4069,7 @@ input.fullwidth {
 
 .weblate-team {
   display: table;
-  width: 82%;
+  width: 78%;
   margin: 0 auto;
 }
 
@@ -4092,3 +4107,84 @@ input.fullwidth {
     text-align: center;
   }
 }
+
+/* Flex property for boxes */
+
+.flex {
+  display: flex;
+}
+
+/* Box display flow root property */
+
+.box {
+  display: flow-root !important;
+  position: relative;
+}
+
+/* Box bottom left and right button custom position */
+
+.bottom-left {
+  position: absolute;
+  bottom: 40px;
+}
+
+.bottom-right {
+  position: absolute;
+  bottom: 40px;
+  right: 40px;
+}
+
+/* Media Queries for responsiveness */
+
+@media screen and (max-width: 891px) {
+  .flex {
+    display: unset;
+  }
+}
+
+@media screen and (max-width: 550px) {
+  .bottom-right {
+    position: unset;
+    bottom: unset;
+    right: unset;
+  }
+
+  .installations .box ul,
+  .mailing .box ul {
+    padding-bottom: unset;
+  }
+
+  .bottom-left {
+    position: unset;
+    bottom: unset;
+  }
+}
+
+@media screen and (max-width: 650px) {
+  section.bottom .box p {
+    margin-bottom: 100px;
+  }
+
+  section.bottom .box.donate a {
+    bottom: 30px;
+  }
+
+  section.bottom .box.join a {
+    bottom: 30px;
+  }
+}
+
+@media screen and (max-width: 1030px) and (min-width: 892px) {
+  .installations .box ul,
+  .mailing .box ul {
+    padding-bottom: 50px;
+  }
+
+  .bottom-left {
+    bottom: 60px;
+  }
+
+  .bottom-right {
+    bottom: 12px;
+  }
+}
diff --git a/weblate_web/templates/about.html b/weblate_web/templates/about.html
index 4f0b15cdcb..af3197650b 100644
--- a/weblate_web/templates/about.html
+++ b/weblate_web/templates/about.html
@@ -14,7 +14,7 @@ <h1 class="section-title min-m">{% block title %}{% trans "The Weblate Way" %}{%
             </div>
 
             <div class="aboutus-list">
-                <div class="box">
+                <div class="box green">
                     <img class="avatar" src="{% static "img/MichalPhoto.png" %}" />
                     <div class="date">{% trans "February 2012" %}—Michal Čihař</div>
                     <h2><a href="{% url 'post' slug='looking-pootle-alternative' %}">{% trans "Looking for a Pootle alternative" %}</a></h2>
@@ -38,7 +38,7 @@ <h2><a href="{% url 'post' slug='why-weblate' %}">{% trans "Why Weblate?" %}</a>
                         ◦ {% trans "Consistency checks" %}
                     </p>
                 </div>
-                <div class="box">
+                <div class="box green">
                     <div class="date">{% trans "Today" %}—Michal Čihař</div>
                     <h2>{% trans "Weblate grows and the future is open to new opportunities." %}</h2>
                 </div>
diff --git a/weblate_web/templates/contribute.html b/weblate_web/templates/contribute.html
index ac4d233659..c5e3d1e8e8 100644
--- a/weblate_web/templates/contribute.html
+++ b/weblate_web/templates/contribute.html
@@ -20,6 +20,7 @@ <h1 class="section-title min-m">{% block title %}{% trans "Contribute to Weblate
             </div>
 
             <div class="contribution-list">
+              <div class="flex">
                 <div class="box">
                     <h2>{% trans "Found a <strong>bug</strong> in Weblate?" %}</h2>
                     <ul>
@@ -28,7 +29,7 @@ <h2>{% trans "Found a <strong>bug</strong> in Weblate?" %}</h2>
                         <li>{% blocktrans with url='https://github.com/WeblateOrg/weblate/issues/new?template=bug_report.md' %}If you're unable to find an open issue addressing the problem, <a href="{{ url }}">open a new one</a>.{% endblocktrans %}</li>
                         <li>{% trans "<strong>Follow instructions in the issue template</strong>, and provide as much relevant info as possible." %}</li>
                     </ul>
-                    <a href="https://github.com/WeblateOrg/weblate/issues/" class="button">{% trans "GitHub issues" %}</a>
+                    <a href="https://github.com/WeblateOrg/weblate/issues/" class="button bottom-left">{% trans "GitHub issues" %}</a>
                 </div>
                 <div class="box">
                     <h2>{% trans "Have a <strong>patch</strong> that fixes a bug?" %}</h2>
@@ -36,15 +37,17 @@ <h2>{% trans "Have a <strong>patch</strong> that fixes a bug?" %}</h2>
                         <li>{% blocktrans with url='https://github.com/WeblateOrg/weblate/compare' %}Open a new <a href="{{ url }}">GitHub pull request</a> with the patch.{% endblocktrans %}</li>
                         <li>{% blocktrans %}Ensure the pull request description clearly describes the problem and solution. Include the relevant issue number if applicable.{% endblocktrans %}</li>
                     </ul>
-                    <a href="https://github.com/WeblateOrg/weblate/compare" class="button">{% trans "Open a pull request" %}</a>
+                    <a href="https://github.com/WeblateOrg/weblate/compare" class="button bottom-left">{% trans "Open a pull request" %}</a>
                 </div>
+              </div>
+              <div class="flex">
                 <div class="box">
                     <h2>{% trans "Missing a <strong>feature</strong> or want to change something?" %}</h2>
                     <ul>
                         <li>{% blocktrans with url="https://github.com/WeblateOrg/weblate/issues/new?template=feature_request.md" %}Suggest your change in the <a href="{{ url }}">GitHub issues</a>.{% endblocktrans %}</li>
                         <li>{% trans "<strong>Follow instructions in the issue template</strong>, and provide as much relevant info as possible." %}</li>
                     </ul>
-                    <a href="https://github.com/WeblateOrg/weblate/issues" class="button">{% trans "GitHub issues" %}</a>
+                    <a href="https://github.com/WeblateOrg/weblate/issues" class="button bottom-left">{% trans "GitHub issues" %}</a>
                 </div>
                 <div class="box">
                     <h2>{% trans "<strong>Source code</strong> related questions?" %}</h2>
@@ -52,26 +55,31 @@ <h2>{% trans "<strong>Source code</strong> related questions?" %}</h2>
                         <li>{% blocktrans with url='https://docs.weblate.org/en/latest/contributing/index.html' %}Please consult the <a href="{{ url }}">contributor documentation</a> to find the most common topics.{% endblocktrans %}</li>
                         <li>{% blocktrans with url='https://lists.cihar.com/hyperkitty/list/weblate@lists.cihar.com/' %}Ask any question about the source code on the <a href="{{ url }}">Weblate mailing list</a>.{% endblocktrans %}</li>
                     </ul>
-                    <a href="https://docs.weblate.org/en/latest/contributing/index.html" class="button">{% trans "Browse documentation" %}</a>
+                    <a href="https://docs.weblate.org/en/latest/contributing/index.html" class="button bottom-left">{% trans "Browse documentation" %}</a>
                 </div>
+              </div>
+              <div class="flex">
                 <div class="box">
                     <h2>{% trans "Want to help out with <strong>Documentation</strong>?" %}</h2>
                     <ul>
                         <li>{% blocktrans with url='https://docs.weblate.org/' %}The documentation is part of the main source code repository and you can easily follow the links to edit each page directly from the <a href="{{ url }}">documentation</a>.{% endblocktrans %}</li>
                         <li>{% blocktrans %}Once you have a patch ready, please follow <a href="#patch">patch submission</a> instructions.{% endblocktrans %}</li>
                     </ul>
-                    <a href="https://docs.weblate.org/" class="button">{% trans "Browse documentation" %}</a>
+                    <a href="https://docs.weblate.org/" class="button bottom-left">{% trans "Browse documentation" %}</a>
                 </div>
                 <div class="box">
                     <h2>{% trans "<strong>Financial support</strong> is always put to good use." %}</h2>
                     <p>{% trans "Please open the donation page for options on how to donate." %}</p>
-                    <a href="{% url 'donate' %}" class="button">{% trans "Donate now" %}</a>
+                    <a href="{% url 'donate' %}" class="button bottom-left">{% trans "Donate now" %}</a>
                 </div>
+              </div>
+              <div class="flex">
                 <div class="box">
                     <h2>{% blocktrans %}<strong>Are you a translator?</strong> Help translate Weblate itself.{% endblocktrans %}</h2>
                     <p>{% blocktrans %}You can translate Weblate and many other projects at <a href="https://hosted.weblate.org/engage/weblate/">hosted.weblate.org</a>.{% endblocktrans %}</p>
-                    <a href="https://hosted.weblate.org/engage/weblate/" class="button">{% trans "Start translating" %}</a>
+                    <a href="https://hosted.weblate.org/engage/weblate/" class="button bottom-left">{% trans "Start translating" %}</a>
                 </div>
+              </div>
             </div>
         </div>
     </div>
diff --git a/weblate_web/templates/snippets/bottom.html b/weblate_web/templates/snippets/bottom.html
index c3dab3a379..b767d37321 100644
--- a/weblate_web/templates/snippets/bottom.html
+++ b/weblate_web/templates/snippets/bottom.html
@@ -1,7 +1,9 @@
 {% load i18n %}
 <section class="bottom {{ extra_css }}">
     <div class="row">
+        <div class="flex">
         {% include "snippets/box-join.html" %}
         {% include "snippets/box-donate.html" %}
+        </div>
     </div>
 </section>
diff --git a/weblate_web/templates/support.html b/weblate_web/templates/support.html
index e26de64e3e..97fb32bf82 100644
--- a/weblate_web/templates/support.html
+++ b/weblate_web/templates/support.html
@@ -48,6 +48,7 @@ <h1 class="section-title min-m">{% trans "Get help" %}</h1>
         <h2 class="section-title crypto">{% trans "Prepaid support for gratis service and self-hosted installations" %}</h2>
 
         <div class="installations">
+          <div class="flex">
             <div class="box">
                 <div class="icon"><img src="{% static "img/Support-Basic.svg" %}" /></div>
                 <h2>{% trans "Basic self-hosted support" %}</h2>
@@ -55,8 +56,8 @@ <h2>{% trans "Basic self-hosted support" %}</h2>
                     <li>{% trans "Issues in your environment fixed immediately." %}</li>
                     <li>{% trans "Priority e-mail support." %}</li>
                 </ul>
-                <a href="{% url 'subscription-new' %}?plan=basic" class="format-item">{{ 500 | price_format }}<span>{% trans "annually" %}</span></a>
-                <a href="{% url 'subscription-new' %}?plan=basic" class="button black right">{% trans "Buy now" %}</a>
+                <a href="{% url 'subscription-new' %}?plan=basic" class="format-item bottom-left">{{ 500 | price_format }}<span>{% trans "annually" %}</span></a>
+                <a href="{% url 'subscription-new' %}?plan=basic" class="button black right bottom-right">{% trans "Buy now" %}</a>
             </div>
             <div class="box">
                 <div class="icon"><img src="{% static "img/Support-Plus.svg" %}" /></div>
@@ -67,9 +68,11 @@ <h2>{% trans "Extended self-hosted support" %}</h2>
                     <li>{% trans "Priority e-mail support." %}</li>
                     <li>{% trans "Only available with the installation package" %}</li>
                 </ul>
-                <a href="{% url 'subscription-new' %}?plan=extended" class="format-item">{{ 750 | price_format }}<span>{% trans "annually" %}</span></a>
-                <a href="{% url 'subscription-new' %}?plan=extended" class="button black right">{% trans "Buy now" %}</a>
+                <a href="{% url 'subscription-new' %}?plan=extended" class="format-item bottom-left">{{ 750 | price_format }}<span>{% trans "annually" %}</span></a>
+                <a href="{% url 'subscription-new' %}?plan=extended" class="button black right bottom-right">{% trans "Buy now" %}</a>
             </div>
+          </div>
+          <div class="flex">
             <div class="box">
                 <div class="icon"><img src="{% static "img/Support-Premium.svg" %}" /></div>
                 <h2>{% trans "Premium self-hosted support" %}</h2>
@@ -79,8 +82,8 @@ <h2>{% trans "Premium self-hosted support" %}</h2>
                     <li>{% trans "Private consultations." %}</li>
                     <li>{% trans "Next business day support response guaranteed." %}</li>
                 </ul>
-                <a href="{% url 'subscription-new' %}?plan=premium" class="format-item">{{ 1200 | price_format }}<span>{% trans "annually" %}</span></a>
-                <a href="{% url 'subscription-new' %}?plan=premium" class="button black right">{% trans "Buy now" %}</a>
+                <a href="{% url 'subscription-new' %}?plan=premium" class="format-item bottom-left">{{ 1200 | price_format }}<span>{% trans "annually" %}</span></a>
+                <a href="{% url 'subscription-new' %}?plan=premium" class="button black right bottom-right">{% trans "Buy now" %}</a>
             </div>
             <div class="box" id="install">
                 <div class="icon"><img src="{% static "img/linux.png" %}" /></div>
@@ -91,9 +94,11 @@ <h2>{% trans "Installation on your Linux server" %}</h2>
                     <li>{% trans "Requires root access or close cooperation of your admins" %}</li>
                     <li>{% trans "Setup customization" %}</li>
                 </ul>
-                <a href="{% url 'subscription-new' %}?plan=install:linux" class="format-item">{{ 300 | price_format }}<span>{% trans "installation" %}</span></a>
-                <a href="{% url 'subscription-new' %}?plan=install:linux" class="button black right">{% trans "Buy now" %}</a>
+                <a href="{% url 'subscription-new' %}?plan=install:linux" class="format-item bottom-left">{{ 300 | price_format }}<span>{% trans "installation" %}</span></a>
+                <a href="{% url 'subscription-new' %}?plan=install:linux" class="button black right bottom-right">{% trans "Buy now" %}</a>
             </div>
+          </div>
+          <div class="flex">
             <div class="box" id="backup">
                 <div class="icon"><img src="{% static "img/Support-Backup.svg" %}" /></div>
                 <h2>{% trans "Backup service" %}</h2>
@@ -104,8 +109,8 @@ <h2>{% trans "Backup service" %}</h2>
                     <li>{% trans "Stores up to 100 GB of backups" %}</li>
                     <li><a href="https://docs.weblate.org/en/latest/admin/backup.html#cloudbackup">{% trans "Read more in the documentation." %}</a></li>
                 </ul>
-                <a href="{% url 'subscription-new' %}?plan=backup" class="format-item">{{ 250 | price_format }}<span>{% trans "annually" %}</span></a>
-                <a href="{% url 'subscription-new' %}?plan=backup" class="button black right">{% trans "Buy now" %}</a>
+                <a href="{% url 'subscription-new' %}?plan=backup" class="format-item bottom-left">{{ 250 | price_format }}<span>{% trans "annually" %}</span></a>
+                <a href="{% url 'subscription-new' %}?plan=backup" class="button black right bottom-right">{% trans "Buy now" %}</a>
             </div>
             <div class="box">
                 <div class="icon"><img src="{% static "img/icon-call.svg" %}" /></div>
@@ -115,9 +120,10 @@ <h2>{% trans "Consulting services and/or custom development" %}</h2>
                     <li>{% trans "Integration of Weblate into your workflow" %}</li>
                     <li>{% trans "Suggestions on the internationalization and localization" %}</li>
                 </ul>
-                <a class="format-item">{{ 70 | price_format }}<span>{% trans "hourly" %}</span></a>
-                <a href="mailto:sales@weblate.org?subject=Consulting services" class="button black right">{% trans "Contact us" %}</a>
+                <a class="format-item bottom-left">{{ 70 | price_format }}<span>{% trans "hourly" %}</span></a>
+                <a href="mailto:sales@weblate.org?subject=Consulting services" class="button black right bottom-right">{% trans "Contact us" %}</a>
             </div>
+          </div>
             <a href="mailto:support@weblate.org" class="button center">{% trans "Ask for help" %}</a>
         </div>
         <h2 class="section-title crypto payment-conditions">{% trans "Payment" %}</h2>