diff --git a/contact/index.html b/contact/index.html
index ea22ca535d..89886e81aa 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -388,33 +388,32 @@ window.addEventListener('scroll',changeHeaderBg);
 
 
 
-<section class="bg-primary-bg-light dark:bg-primary-bg-dark py-[85px] px-5">
+<section class="bg-primary-bg-light dark:bg-primary-bg-dark lg:h-[855px] py-[90px] px-5">
     <div class="container flex flex-col items-center">
-        <p class="text-[35px] lg:text-[45px] text-grey-black dark:text-white text-center font-bold mb-4"><span class="text-active-blue">Join</span> SimpleX</p>
-        <p class="text-black dark:text-white text-base text-center mb-10">We invite you to join the conversation</p>
+        <p class="text-[38px] leading-[36px] md:leading-[55px] text-grey-black dark:text-white text-center font-bold mb-5"><span class="text-active-blue">Join</span> SimpleX</p>
+        <p class="text-black dark:text-white text-base text-center mb-14">We invite you to join the conversation</p>
 
-        <div class="flex flex-col items-center gap-5 self-stretch mb-10">
+        <div class="flex flex-col items-center gap-5 self-stretch mb-12">
             <a href="https://www.reddit.com/r/SimpleXChat/" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border bg-[#D9ECFF]">Join the REDDIT community</a>
             <a href="https://github.com/simplex-chat" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border bg-[#D9ECFF]">Join us on GitHub</a>
             <a href="https://github.com/simplex-chat/simplex-chat#help-us-with-donations" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border-none bg-white dark:bg-[rgba(112,240,249,0.2)] border border-[#0053D0]">Donate here to help us</a>
         </div>
 
-        <p class="text-black dark:text-white text-base text-center mb-5">Sign up to receive our updates</p>
+        <p class="text-grey-black dark:text-white text-base text-center mb-7">Sign up to receive our updates</p>
 
-        <form class="flex items-center w-full max-w-[540px] mb-4"
+        <form class="flex items-center w-full max-w-[540px] mb-20"
             action="https://chat.us2.list-manage.com/subscribe/post?u=ddd892b258ae36e5438e6d4e1&amp;id=ad6037a2fe"
             method="post" target="_blank" novalidate>
-            <input name="EMAIL" type="text" class="h-[44px] rounded-l-[34px] bg-transparent border border-primary-light focus:outline-none text-primary-light dark:text-primary-dark text-base w-full max-w-[400px] px-5"
-                placeholder="Enter your email address">
+            <input name="EMAIL" type="text" class="h-[44px] rounded-l-[34px] bg-transparent border border-primary-light focus:outline-none text-primary-light dark:text-primary-dark text-base w-full max-w-[400px] px-5 placeholder:text-grey-black placeholder:dark:text-white placeholder:text-base placeholder:font-normal placeholder:tracking-[0.01em]" placeholder="Enter your email address">
             <span style="position: absolute; left: -5000px" aria-hidden="true">
                 <input type="text" name="b_ddd892b258ae36e5438e6d4e1_ad6037a2fe" tabindex="-1" value="" />
             </span>
             <input type="submit" class="h-[44px] rounded-r-[34px] bg-primary-light text-white text-center px-8">
         </form>
 
-        <hr class="block my-10 mx-5 dark:opacity-[0.2] w-full">
+        <hr class="block mb-7 mx-5 dark:opacity-[0.2] w-full">
 
-        <p class="text-black dark:text-white text-center mb-5">Get SimpleX</p>
+        <p class="text-grey-black dark:text-white text-center mb-7">Get SimpleX</p>
         <div class="flex items-center justify-center gap-4 flex-wrap">
             <a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
             <a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
diff --git a/css/style.css b/css/style.css
index ac4fe2c12c..332247885c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -159,7 +159,8 @@ html {
 #network::before {
   display: block;
   content: " ";
-  margin-top: -26px;
+  position: absolute;
+  top: -26px;
   height: 66px;
   visibility: hidden;
   pointer-events: none;
@@ -357,7 +358,7 @@ header nav {
 }
 
 .swiper-scrollbar-drag {
-  width: 112px !important;
+  /* width: 112px !important; */
   height: 8px !important;
   background-color: #0197FF;
 }
@@ -387,24 +388,24 @@ header nav {
   transform: translateY(40px);
 }
 
-.card:hover > div:nth-child(1) {
+.card:not(.no-hover):hover > div:nth-child(1) {
   height: 200px;
   padding: 12px 10px;
 }
-.card:hover > div:nth-child(2) {
+.card:not(.no-hover):hover > div:nth-child(2) {
   height: 270px;
   padding: 8px 24px;
 }
 .card.card-active > div:nth-child(2) {
-  height: 470px;
+  height: 480px;
 }
 
-.card:hover > div:nth-child(2) > *:nth-child(2),
-.card:hover > div:nth-child(2) > *:nth-child(3),
+.card:not(.no-hover):hover > div:nth-child(2) > *:nth-child(2),
+.card:not(.no-hover):hover > div:nth-child(2) > *:nth-child(3),
 .card.card-active > div:nth-child(2) > *:nth-child(2),
 .card.card-active > div:nth-child(2) > *:nth-child(3) {
   opacity: 1;
-  max-height: 470px;
+  max-height: 480px;
   transform: translateY(0px);
 }
 
@@ -417,7 +418,7 @@ header nav {
 .simplex-unique-card .card-content{
   transition: all .5s ease-out;
 }
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .simplex-unique-card .card-content .content-body{
     height: 0;
     opacity: 0;
@@ -446,16 +447,29 @@ header nav {
 
 
 /* comparison */
-#comparison table td,
-#comparison table th {
-  font-size: 15px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.4;
-  letter-spacing: 0.47px;
+#comparison table thead th{
+  font-size: 16px;
+  line-height: 36px;
+  font-weight: 500;
+  text-align: center;
+}
+#comparison table tbody td{
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+}
+#comparison table tbody tr > td:first-child{
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  text-align: left;
+}
+@media (min-width: 1024px) {
+  #comparison table tbody tr > td:first-child{
+    font-size: 18px;
+    line-height: 36px;
+  }  
 }
-
 
 /* hero */
 header{
diff --git a/css/tailwind.css b/css/tailwind.css
index 8385490903..09eebc3597 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -660,11 +660,6 @@ video {
   margin-bottom: 1rem;
 }
 
-.my-12 {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
-}
-
 .mx-5 {
   margin-left: 1.25rem;
   margin-right: 1.25rem;
@@ -680,11 +675,6 @@ video {
   margin-bottom: 2.5rem;
 }
 
-.my-16 {
-  margin-top: 4rem;
-  margin-bottom: 4rem;
-}
-
 .my-5 {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
@@ -714,20 +704,20 @@ video {
   margin-top: auto;
 }
 
-.mb-\[32px\] {
-  margin-bottom: 32px;
+.mb-7 {
+  margin-bottom: 1.75rem;
 }
 
-.mb-\[86px\] {
-  margin-bottom: 86px;
+.mb-\[62px\] {
+  margin-bottom: 62px;
 }
 
-.mb-\[90px\] {
-  margin-bottom: 90px;
+.mb-\[54px\] {
+  margin-bottom: 54px;
 }
 
-.mb-\[53px\] {
-  margin-bottom: 53px;
+.mb-20 {
+  margin-bottom: 5rem;
 }
 
 .mb-\[50px\] {
@@ -738,30 +728,26 @@ video {
   margin-bottom: 20px;
 }
 
-.mb-\[60px\] {
-  margin-bottom: 60px;
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
 }
 
 .mb-14 {
   margin-bottom: 3.5rem;
 }
 
-.mb-\[21px\] {
-  margin-bottom: 21px;
-}
-
-.mb-\[95px\] {
-  margin-bottom: 95px;
-}
-
 .mb-\[30px\] {
   margin-bottom: 30px;
 }
 
-.mb-10 {
-  margin-bottom: 2.5rem;
-}
-
 .mb-\[80px\] {
   margin-bottom: 80px;
 }
@@ -790,18 +776,10 @@ video {
   margin-bottom: 1.5rem;
 }
 
-.mb-5 {
-  margin-bottom: 1.25rem;
-}
-
 .mb-\[76px\] {
   margin-bottom: 76px;
 }
 
-.mb-7 {
-  margin-bottom: 1.75rem;
-}
-
 .mb-\[46px\] {
   margin-bottom: 46px;
 }
@@ -846,6 +824,10 @@ video {
   margin-bottom: 28px;
 }
 
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
 .mr-\[-4px\] {
   margin-right: -4px;
 }
@@ -858,10 +840,6 @@ video {
   margin-right: auto;
 }
 
-.mb-16 {
-  margin-bottom: 4rem;
-}
-
 .mr-\[-36px\] {
   margin-right: -36px;
 }
@@ -874,8 +852,12 @@ video {
   margin-left: 2.5rem;
 }
 
-.mb-20 {
-  margin-bottom: 5rem;
+.mb-24 {
+  margin-bottom: 6rem;
+}
+
+.mb-\[74px\] {
+  margin-bottom: 74px;
 }
 
 .mb-\[12px\] {
@@ -886,10 +868,6 @@ video {
   margin-bottom: 75px;
 }
 
-.mb-\[44px\] {
-  margin-bottom: 44px;
-}
-
 .block {
   display: block;
 }
@@ -934,16 +912,12 @@ video {
   height: 215px;
 }
 
-.h-\[152px\] {
-  height: 152px;
-}
-
 .h-\[110px\] {
   height: 110px;
 }
 
-.h-\[470px\] {
-  height: 470px;
+.h-\[480px\] {
+  height: 480px;
 }
 
 .h-\[322px\] {
@@ -954,18 +928,22 @@ video {
   height: 138px;
 }
 
-.h-6 {
-  height: 1.5rem;
+.h-\[34px\] {
+  height: 34px;
 }
 
-.h-\[40px\] {
-  height: 40px;
+.h-\[52px\] {
+  height: 52px;
 }
 
 .h-screen {
   height: 100vh;
 }
 
+.h-\[40px\] {
+  height: 40px;
+}
+
 .h-\[131px\] {
   height: 131px;
 }
@@ -1257,16 +1235,16 @@ video {
   gap: 20px;
 }
 
-.gap-\[50px\] {
-  gap: 50px;
+.gap-5 {
+  gap: 1.25rem;
 }
 
 .gap-3 {
   gap: 0.75rem;
 }
 
-.gap-16 {
-  gap: 4rem;
+.gap-12 {
+  gap: 3rem;
 }
 
 .gap-4 {
@@ -1289,12 +1267,12 @@ video {
   gap: 150px;
 }
 
-.gap-6 {
-  gap: 1.5rem;
+.gap-\[50px\] {
+  gap: 50px;
 }
 
-.gap-5 {
-  gap: 1.25rem;
+.gap-6 {
+  gap: 1.5rem;
 }
 
 .gap-x-10 {
@@ -1302,8 +1280,8 @@ video {
        column-gap: 2.5rem;
 }
 
-.gap-y-20 {
-  row-gap: 5rem;
+.gap-y-32 {
+  row-gap: 8rem;
 }
 
 .self-center {
@@ -1540,9 +1518,9 @@ video {
   padding-right: 1rem;
 }
 
-.py-\[85px\] {
-  padding-top: 85px;
-  padding-bottom: 85px;
+.py-\[90px\] {
+  padding-top: 90px;
+  padding-bottom: 90px;
 }
 
 .px-\[34px\] {
@@ -1550,9 +1528,9 @@ video {
   padding-right: 34px;
 }
 
-.py-\[60px\] {
-  padding-top: 60px;
-  padding-bottom: 60px;
+.py-\[95px\] {
+  padding-top: 95px;
+  padding-bottom: 95px;
 }
 
 .py-2 {
@@ -1615,16 +1593,6 @@ video {
   padding-right: 5rem;
 }
 
-.py-\[80px\] {
-  padding-top: 80px;
-  padding-bottom: 80px;
-}
-
-.py-\[90px\] {
-  padding-top: 90px;
-  padding-bottom: 90px;
-}
-
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -1644,6 +1612,10 @@ video {
   padding-top: 1rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pt-\[66px\] {
   padding-top: 66px;
 }
@@ -1699,20 +1671,25 @@ video {
   line-height: 1.5rem;
 }
 
-.text-\[45px\] {
-  font-size: 45px;
+.text-\[35px\] {
+  font-size: 35px;
 }
 
-.text-\[20px\] {
-  font-size: 20px;
+.text-\[18px\] {
+  font-size: 18px;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
 }
 
 .text-\[16px\] {
   font-size: 16px;
 }
 
-.text-\[18px\] {
-  font-size: 18px;
+.text-\[20px\] {
+  font-size: 20px;
 }
 
 .text-\[14px\] {
@@ -1723,19 +1700,10 @@ video {
   font-size: 12px;
 }
 
-.text-\[35px\] {
-  font-size: 35px;
-}
-
 .text-\[28px\] {
   font-size: 28px;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -1761,6 +1729,10 @@ video {
   font-weight: 300;
 }
 
+.leading-\[45px\] {
+  line-height: 45px;
+}
+
 .leading-\[28px\] {
   line-height: 28px;
 }
@@ -1769,14 +1741,14 @@ video {
   line-height: 26px;
 }
 
-.leading-6 {
-  line-height: 1.5rem;
-}
-
 .leading-\[43px\] {
   line-height: 43px;
 }
 
+.leading-6 {
+  line-height: 1.5rem;
+}
+
 .leading-\[36px\] {
   line-height: 36px;
 }
@@ -1939,6 +1911,42 @@ video {
   transition-duration: 150ms;
 }
 
+.placeholder\:text-base::-moz-placeholder {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.placeholder\:text-base::placeholder {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.placeholder\:font-normal::-moz-placeholder {
+  font-weight: 400;
+}
+
+.placeholder\:font-normal::placeholder {
+  font-weight: 400;
+}
+
+.placeholder\:tracking-\[0\.01em\]::-moz-placeholder {
+  letter-spacing: 0.01em;
+}
+
+.placeholder\:tracking-\[0\.01em\]::placeholder {
+  letter-spacing: 0.01em;
+}
+
+.placeholder\:text-grey-black::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(63 72 75 / var(--tw-text-opacity));
+}
+
+.placeholder\:text-grey-black::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(63 72 75 / var(--tw-text-opacity));
+}
+
 .before\:absolute::before {
   content: var(--tw-content);
   position: absolute;
@@ -2123,6 +2131,16 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.dark .placeholder\:dark\:text-white::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.dark .placeholder\:dark\:text-white::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .dark .dark\:before\:bg-white::before {
   content: var(--tw-content);
   --tw-bg-opacity: 1;
@@ -2160,6 +2178,18 @@ video {
     position: static;
   }
 
+  .md\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
+  .md\:mb-16 {
+    margin-bottom: 4rem;
+  }
+
+  .md\:mb-0 {
+    margin-bottom: 0px;
+  }
+
   .md\:mt-6 {
     margin-top: 1.5rem;
   }
@@ -2168,10 +2198,6 @@ video {
     margin-bottom: 1.5rem;
   }
 
-  .md\:mb-0 {
-    margin-bottom: 0px;
-  }
-
   .md\:block {
     display: block;
   }
@@ -2206,6 +2232,14 @@ video {
     width: 168px;
   }
 
+  .md\:w-\[30\%\] {
+    width: 30%;
+  }
+
+  .md\:w-\[70\%\] {
+    width: 70%;
+  }
+
   .md\:w-fit {
     width: -moz-fit-content;
     width: fit-content;
@@ -2219,18 +2253,18 @@ video {
     max-width: 1276px;
   }
 
+  .md\:flex-\[1\] {
+    flex: 1;
+  }
+
+  .md\:flex-\[2\] {
+    flex: 2;
+  }
+
   .md\:flex-1 {
     flex: 1 1 0%;
   }
 
-  .md\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
   .md\:flex-row {
     flex-direction: row;
   }
@@ -2247,6 +2281,14 @@ video {
     align-items: center;
   }
 
+  .md\:gap-14 {
+    gap: 3.5rem;
+  }
+
+  .md\:gap-9 {
+    gap: 2.25rem;
+  }
+
   .md\:p-10 {
     padding: 2.5rem;
   }
@@ -2284,6 +2326,10 @@ video {
     line-height: 1.75rem;
   }
 
+  .md\:text-\[20px\] {
+    font-size: 20px;
+  }
+
   .md\:text-\[55px\] {
     font-size: 55px;
   }
@@ -2296,6 +2342,10 @@ video {
     font-size: 35px;
   }
 
+  .md\:leading-\[55px\] {
+    line-height: 55px;
+  }
+
   .md\:leading-\[63px\] {
     line-height: 63px;
   }
@@ -2326,6 +2376,18 @@ video {
     margin-bottom: 5rem;
   }
 
+  .lg\:mb-\[90px\] {
+    margin-bottom: 90px;
+  }
+
+  .lg\:mb-\[54px\] {
+    margin-bottom: 54px;
+  }
+
+  .lg\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
   .lg\:mt-0 {
     margin-top: 0px;
   }
@@ -2346,6 +2408,18 @@ video {
     display: none;
   }
 
+  .lg\:h-\[888px\] {
+    height: 888px;
+  }
+
+  .lg\:h-\[642px\] {
+    height: 642px;
+  }
+
+  .lg\:h-\[950px\] {
+    height: 950px;
+  }
+
   .lg\:h-auto {
     height: auto;
   }
@@ -2355,6 +2429,18 @@ video {
     height: fit-content;
   }
 
+  .lg\:h-\[890px\] {
+    height: 890px;
+  }
+
+  .lg\:h-\[855px\] {
+    height: 855px;
+  }
+
+  .lg\:w-full {
+    width: 100%;
+  }
+
   .lg\:w-auto {
     width: auto;
   }
@@ -2363,10 +2449,6 @@ video {
     max-width: 448px;
   }
 
-  .lg\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
@@ -2375,6 +2457,10 @@ video {
     flex-direction: row;
   }
 
+  .lg\:flex-col {
+    flex-direction: column;
+  }
+
   .lg\:items-start {
     align-items: flex-start;
   }
@@ -2383,6 +2469,14 @@ video {
     align-items: center;
   }
 
+  .lg\:gap-16 {
+    gap: 4rem;
+  }
+
+  .lg\:gap-0 {
+    gap: 0px;
+  }
+
   .lg\:gap-\[350px\] {
     gap: 350px;
   }
@@ -2453,10 +2547,23 @@ video {
     text-align: left;
   }
 
+  .lg\:text-center {
+    text-align: center;
+  }
+
   .lg\:text-\[45px\] {
     font-size: 45px;
   }
 
+  .lg\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .lg\:text-\[38px\] {
+    font-size: 38px;
+  }
+
   .lg\:text-\[65px\] {
     font-size: 65px;
   }
@@ -2465,6 +2572,10 @@ video {
     font-size: 35px;
   }
 
+  .lg\:leading-\[36px\] {
+    line-height: 36px;
+  }
+
   .lg\:leading-\[45px\] {
     line-height: 45px;
   }
@@ -2538,10 +2649,18 @@ video {
     height: 100%;
   }
 
+  .xl\:h-\[888px\] {
+    height: 888px;
+  }
+
   .xl\:max-h-\[888px\] {
     max-height: 888px;
   }
 
+  .xl\:min-h-\[565px\] {
+    min-height: 565px;
+  }
+
   .xl\:min-w-\[600px\] {
     min-width: 600px;
   }
diff --git a/index.html b/index.html
index 61533edec2..bce2f85e42 100644
--- a/index.html
+++ b/index.html
@@ -421,21 +421,21 @@ window.addEventListener('scroll',changeHeaderBg);
 </script>
 
 
-<section class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[85px] px-5">
+<section class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[90px] px-5 lg:h-[888px]">
     <div class="container">
-        <p class="text-grey-black dark:text-white text-[45px] text-center font-bold mb-[32px]">Why privacy <span class="gradient-text">matters</span></p>
-        <p class="text-center text-[20px] font-medium mb-[86px] text-black dark:text-white">Preserving the privacy of your metadata &mdash; <span class="text-active-blue">who you talk with</span> &mdash; protects you from:</p>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[20px] mb-[90px]">
+        <p class="text-grey-black dark:text-white text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold mb-4 md:mb-8">Why privacy <span class="gradient-text">matters</span></p>
+        <p class="text-center text-[18px] md:text-[20px] font-medium mb-7 md:mb-16 lg:mb-20 text-black dark:text-white">Preserving the privacy of your metadata &mdash; <span class="text-active-blue">who you talk with</span> &mdash; protects you from:</p>
+        <div class="flex flex-col lg:flex-row gap-[20px] mb-[62px] lg:mb-[90px]">
 
             
-            <div class="bg-white dark:bg-transparent px-[34px] flex flex-col rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
-                <div class="flex items-center justify-center h-[215px]">
+            <div class="bg-white dark:bg-transparent px-[34px] flex flex-col md:flex-row lg:flex-col items-center rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
+                <div class="md:w-[30%] lg:w-full flex items-center justify-center h-[215px]">
                     <img src="/img/new/privacy-section-1.svg" alt="">
                 </div>
-                <div class="h-[152px] flex flex-col items-center justify-between">
-                    <p class="text-center font-medium leading-[28px] text-grey-black dark:text-white">Advertising and price discrimination</p>
+                <div class="md:w-[70%] lg:w-full flex flex-col items-center md:items-start lg:items-center gap-5 mb-[54px] md:mb-0 lg:mb-[54px]">
+                    <p class="font-medium text-xl text-center text-grey-black dark:text-white">Advertising and price discrimination</p>
                     
-                    <a href="javascript:void(0);" data-show-overlay="why-privacy-matters-1" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2 mb-[53px]">Privacy saves you money</a>
+                    <a href="javascript:void(0);" data-show-overlay="why-privacy-matters-1" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2">Privacy saves you money</a>
                     
     
     <div id="why-privacy-matters-1" class="overlay hidden fixed top-0 left-0 bottom-0 right-0 before:absolute before:w-full before:h-full bg-transparent before:bg-secondary-bg-light dark:before:bg-primary-bg-dark before:opacity-90 items-center justify-center p-3 md:p-10 z-[10000]">
@@ -482,14 +482,14 @@ window.addEventListener('scroll',changeHeaderBg);
                 </div>
             </div>
             
-            <div class="bg-white dark:bg-transparent px-[34px] flex flex-col rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
-                <div class="flex items-center justify-center h-[215px]">
+            <div class="bg-white dark:bg-transparent px-[34px] flex flex-col md:flex-row lg:flex-col items-center rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
+                <div class="md:w-[30%] lg:w-full flex items-center justify-center h-[215px]">
                     <img src="/img/new/privacy-section-2.svg" alt="">
                 </div>
-                <div class="h-[152px] flex flex-col items-center justify-between">
-                    <p class="text-center font-medium leading-[28px] text-grey-black dark:text-white">Manipulation of elections</p>
+                <div class="md:w-[70%] lg:w-full flex flex-col items-center md:items-start lg:items-center gap-5 mb-[54px] md:mb-0 lg:mb-[54px]">
+                    <p class="font-medium text-xl text-center text-grey-black dark:text-white">Manipulation of elections</p>
                     
-                    <a href="javascript:void(0);" data-show-overlay="why-privacy-matters-2" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2 mb-[53px]">Privacy gives you power</a>
+                    <a href="javascript:void(0);" data-show-overlay="why-privacy-matters-2" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2">Privacy gives you power</a>
                     
     
     <div id="why-privacy-matters-2" class="overlay hidden fixed top-0 left-0 bottom-0 right-0 before:absolute before:w-full before:h-full bg-transparent before:bg-secondary-bg-light dark:before:bg-primary-bg-dark before:opacity-90 items-center justify-center p-3 md:p-10 z-[10000]">
@@ -532,14 +532,14 @@ window.addEventListener('scroll',changeHeaderBg);
                 </div>
             </div>
             
-            <div class="bg-white dark:bg-transparent px-[34px] flex flex-col rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
-                <div class="flex items-center justify-center h-[215px]">
+            <div class="bg-white dark:bg-transparent px-[34px] flex flex-col md:flex-row lg:flex-col items-center rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
+                <div class="md:w-[30%] lg:w-full flex items-center justify-center h-[215px]">
                     <img src="/img/new/privacy-section-3.svg" alt="">
                 </div>
-                <div class="h-[152px] flex flex-col items-center justify-between">
-                    <p class="text-center font-medium leading-[28px] text-grey-black dark:text-white">Prosecution due to innocent association</p>
+                <div class="md:w-[70%] lg:w-full flex flex-col items-center md:items-start lg:items-center gap-5 mb-[54px] md:mb-0 lg:mb-[54px]">
+                    <p class="font-medium text-xl text-center text-grey-black dark:text-white">Prosecution due to innocent association</p>
                     
-                    <a href="javascript:void(0);" data-show-overlay="why-privacy-matters-3" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2 mb-[53px]">Privacy protects your freedom</a>
+                    <a href="javascript:void(0);" data-show-overlay="why-privacy-matters-3" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2">Privacy protects your freedom</a>
                     
     
     <div id="why-privacy-matters-3" class="overlay hidden fixed top-0 left-0 bottom-0 right-0 before:absolute before:w-full before:h-full bg-transparent before:bg-secondary-bg-light dark:before:bg-primary-bg-dark before:opacity-90 items-center justify-center p-3 md:p-10 z-[10000]">
@@ -594,15 +594,15 @@ window.addEventListener('scroll',changeHeaderBg);
 </section>
 
 
-<section id="why-simplex" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[90px] overflow-hidden px-0 sm:px-1">
+<section id="why-simplex" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[90px] overflow-hidden px-0 sm:px-1 xl:h-[888px]">
     <div class="container scale-100">
-        <p class="text-grey-black dark:text-white text-[35px] lg:text-[45px] text-center font-bold mb-[44px] px-5 sm:px-4">Why SimpleX is <span class="gradient-text">unique</span></p>
+        <p class="text-grey-black dark:text-white text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold mb-14 px-5 sm:px-4">Why SimpleX is <span class="gradient-text">unique</span></p>
 
         <div class="swiper unique-swiper px-5 sm:px-4 py-2">
             <div class="swiper-wrapper mb-16">
 
                 
-                    <div class="swiper-slide overflow-hidden flex items-center md:items-start flex-col xl:flex-row-reverse xl:items-center min-h-[620px] md:min-h-fit px-4 md:px-10 lg:px-[50px] py-8 lg:py-[50px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient relative simplex-unique-card">
+                    <div class="swiper-slide overflow-hidden flex items-center md:items-start flex-col xl:flex-row-reverse xl:items-center min-h-[620px] md:min-h-fit xl:min-h-[565px] px-4 md:px-10 lg:px-[50px] py-8 lg:py-[50px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient relative simplex-unique-card">
                         
                         <div class="md:flex-1 flex items-center justify-center h-[55%] md:h-fit w-full card-image">
                             <img class="w-full max-w-[400px] dark:hidden" src="/img/new/unique-section-1.png" alt="">
@@ -656,7 +656,7 @@ window.addEventListener('scroll',changeHeaderBg);
                         </div>
                     </div>
                 
-                    <div class="swiper-slide overflow-hidden flex items-center md:items-start flex-col xl:flex-row-reverse xl:items-center min-h-[620px] md:min-h-fit px-4 md:px-10 lg:px-[50px] py-8 lg:py-[50px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient relative simplex-unique-card">
+                    <div class="swiper-slide overflow-hidden flex items-center md:items-start flex-col xl:flex-row-reverse xl:items-center min-h-[620px] md:min-h-fit xl:min-h-[565px] px-4 md:px-10 lg:px-[50px] py-8 lg:py-[50px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient relative simplex-unique-card">
                         
                         <div class="md:flex-1 flex items-center justify-center h-[55%] md:h-fit w-full card-image">
                             <img class="w-full max-w-[400px] dark:hidden" src="/img/new/unique-section-2.png" alt="">
@@ -706,7 +706,7 @@ window.addEventListener('scroll',changeHeaderBg);
                         </div>
                     </div>
                 
-                    <div class="swiper-slide overflow-hidden flex items-center md:items-start flex-col xl:flex-row-reverse xl:items-center min-h-[620px] md:min-h-fit px-4 md:px-10 lg:px-[50px] py-8 lg:py-[50px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient relative simplex-unique-card">
+                    <div class="swiper-slide overflow-hidden flex items-center md:items-start flex-col xl:flex-row-reverse xl:items-center min-h-[620px] md:min-h-fit xl:min-h-[565px] px-4 md:px-10 lg:px-[50px] py-8 lg:py-[50px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient relative simplex-unique-card">
                         
                         <div class="md:flex-1 flex items-center justify-center h-[55%] md:h-fit w-full card-image">
                             <img class="w-full max-w-[400px] dark:hidden" src="/img/new/unique-section-3.png" alt="">
@@ -758,7 +758,7 @@ window.addEventListener('scroll',changeHeaderBg);
                         </div>
                     </div>
                 
-                    <div class="swiper-slide overflow-hidden flex items-center md:items-start flex-col xl:flex-row-reverse xl:items-center min-h-[620px] md:min-h-fit px-4 md:px-10 lg:px-[50px] py-8 lg:py-[50px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient relative simplex-unique-card">
+                    <div class="swiper-slide overflow-hidden flex items-center md:items-start flex-col xl:flex-row-reverse xl:items-center min-h-[620px] md:min-h-fit xl:min-h-[565px] px-4 md:px-10 lg:px-[50px] py-8 lg:py-[50px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient relative simplex-unique-card">
                         
                         <div class="md:flex-1 flex items-center justify-center h-[55%] md:h-fit w-full card-image">
                             <img class="w-full max-w-[400px] dark:hidden" src="/img/new/unique-section-4.png" alt="">
@@ -1040,11 +1040,11 @@ window.addEventListener('scroll',changeHeaderBg);
 </script>
 
 
-<section id="features" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[60px] px-5">
-    <div class="container flex flex-col items-center gap-[50px]">
-        <p class="text-[45px] text-center font-bold gradient-text">Features</p>
+<section id="features" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[95px] px-5 lg:h-[888px]">
+    <div class="container">
+        <p class="text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold gradient-text mb-20">Features</p>
 
-        <div class="mb-[50px] grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-10 gap-y-20">
+        <div class="mb-[50px] grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-10 gap-y-32">
             
             <div class="flex flex-col items-center">
                 <div class="bg-white flex items-center justify-center w-[175px] h-[110px] rounded-[20px] border-[#859096] border-solid border-[1px] shadow-[2px_2px_0px_#859096] dark:border-none dark:shadow-none mb-[20px] border-gradient">
@@ -1115,15 +1115,15 @@ window.addEventListener('scroll',changeHeaderBg);
 </section>
 
 
-<section id="privacy" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[85px] overflow-hidden px-5">
+<section id="privacy" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[90px] overflow-hidden px-5 lg:h-[888px]">
     <div class="container scale-100">
-        <p class="text-grey-black dark:text-white text-[45px] text-center font-bold mb-[60px]">What makes SimpleX <span class="gradient-text">private</span></p>
+        <p class="text-grey-black dark:text-white text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold mb-20">What makes SimpleX <span class="gradient-text">private</span></p>
 
         <div class="swiper private-swiper overflow-hidden px-4 py-2">
-            <div class="swiper-wrapper mb-14">
+            <div class="swiper-wrapper mb-16">
 
                 
-                <div class="card swiper-slide relative h-[470px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
+                <div class="card swiper-slide relative h-[480px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
                     <div class="flex items-center justify-center py-12 px-6 h-[322px]">
                         <img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-10.svg" alt=""/>
                         <img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-10-dark.svg" alt=""/>
@@ -1141,7 +1141,7 @@ window.addEventListener('scroll',changeHeaderBg);
                     </div>
                 </div>
                 
-                <div class="card swiper-slide relative h-[470px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
+                <div class="card swiper-slide relative h-[480px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
                     <div class="flex items-center justify-center py-12 px-6 h-[322px]">
                         <img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-6.svg" alt=""/>
                         <img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-6-dark.svg" alt=""/>
@@ -1159,7 +1159,7 @@ window.addEventListener('scroll',changeHeaderBg);
                     </div>
                 </div>
                 
-                <div class="card swiper-slide relative h-[470px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
+                <div class="card swiper-slide relative h-[480px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
                     <div class="flex items-center justify-center py-12 px-6 h-[322px]">
                         <img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-1.svg" alt=""/>
                         <img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-1-dark.svg" alt=""/>
@@ -1177,7 +1177,7 @@ window.addEventListener('scroll',changeHeaderBg);
                     </div>
                 </div>
                 
-                <div class="card swiper-slide relative h-[470px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
+                <div class="card swiper-slide relative h-[480px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
                     <div class="flex items-center justify-center py-12 px-6 h-[322px]">
                         <img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-7.svg" alt=""/>
                         <img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-7-dark.svg" alt=""/>
@@ -1195,7 +1195,7 @@ window.addEventListener('scroll',changeHeaderBg);
                     </div>
                 </div>
                 
-                <div class="card swiper-slide relative h-[470px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
+                <div class="card swiper-slide relative h-[480px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
                     <div class="flex items-center justify-center py-12 px-6 h-[322px]">
                         <img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-2.svg" alt=""/>
                         <img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-2-dark.svg" alt=""/>
@@ -1211,7 +1211,7 @@ window.addEventListener('scroll',changeHeaderBg);
                     </div>
                 </div>
                 
-                <div class="card swiper-slide relative h-[470px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
+                <div class="card swiper-slide relative h-[480px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
                     <div class="flex items-center justify-center py-12 px-6 h-[322px]">
                         <img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-8.svg" alt=""/>
                         <img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-8-dark.svg" alt=""/>
@@ -1227,7 +1227,7 @@ window.addEventListener('scroll',changeHeaderBg);
                     </div>
                 </div>
                 
-                <div class="card swiper-slide relative h-[470px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
+                <div class="card swiper-slide relative h-[480px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
                     <div class="flex items-center justify-center py-12 px-6 h-[322px]">
                         <img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-3.svg" alt=""/>
                         <img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-3-dark.svg" alt=""/>
@@ -1247,7 +1247,7 @@ window.addEventListener('scroll',changeHeaderBg);
                     </div>
                 </div>
                 
-                <div class="card swiper-slide relative h-[470px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
+                <div class="card swiper-slide relative h-[480px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
                     <div class="flex items-center justify-center py-12 px-6 h-[322px]">
                         <img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-4.svg" alt=""/>
                         <img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-4-dark.svg" alt=""/>
@@ -1265,7 +1265,7 @@ window.addEventListener('scroll',changeHeaderBg);
                     </div>
                 </div>
                 
-                <div class="card swiper-slide relative h-[470px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
+                <div class="card swiper-slide relative h-[480px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
                     <div class="flex items-center justify-center py-12 px-6 h-[322px]">
                         <img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-9.svg" alt=""/>
                         <img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-9-dark.svg" alt=""/>
@@ -1283,7 +1283,7 @@ window.addEventListener('scroll',changeHeaderBg);
                     </div>
                 </div>
                 
-                <div class="card swiper-slide relative h-[470px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
+                <div class="card swiper-slide relative h-[480px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
                     <div class="flex items-center justify-center py-12 px-6 h-[322px]">
                         <img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-5.svg" alt=""/>
                         <img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-5-dark.svg" alt=""/>
@@ -1313,20 +1313,20 @@ window.addEventListener('scroll',changeHeaderBg);
 </section>
 
 
-<section id="network" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[85px] px-5">
+<section id="network" class="bg-secondary-bg-light dark:bg-secondary-bg-dark lg:h-[642px] py-[95px] px-5">
     <div class="container">
-        <p class="text-grey-black dark:text-white text-[45px] text-center font-bold mb-[21px]">SimpleX <span class="gradient-text">Network</span></p>
-        <p class="text-black dark:text-white text-[16px] font-normal text-center mb-[95px]">Simplex Chat provides the best privacy by combining the advantages of P2P and federated networks.</p>
+        <p class="text-grey-black dark:text-white text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold mb-5">SimpleX <span class="gradient-text">Network</span></p>
+        <p class="text-black dark:text-white text-[16px] font-normal text-center mb-16">Simplex Chat provides the best privacy by combining the advantages of P2P and federated networks.</p>
 
-        <div class="flex flex-col lg:flex-row justify-between gap-16">
-            <div class="flex flex-col items-center">
-                <div class="mb-[30px]">
+        <div class="flex flex-col lg:flex-row justify-between gap-12 md:gap-14 lg:gap-16">
+            <div class="flex flex-col md:flex-row lg:flex-col items-center md:gap-9 lg:gap-0">
+                <div class="mb-4 md:mb-0 lg:mb-8 md:flex-[1] flex items-center justify-center">
                     <img src="/img/new/network-1.svg" alt="" class="dark:hidden"/>
                     <img src="/img/new/network-1-dark.svg" alt="" class="hidden dark:block"/>
                 </div>
-                <div class="flex flex-col items-center justify-center">
-                    <p class="text-active-blue text-[20px] font-bold text-center">Unlike P2P networks</p>
-                    <p class="text-black dark:text-white text-[16px] font-normal text-center mb-[32px]">
+                <div class="md:flex-[2] flex flex-col items-center justify-center">
+                    <p class="text-active-blue text-xl font-bold text-center md:text-left lg:text-center self-stretch">Unlike P2P networks</p>
+                    <p class="text-black dark:text-white text-base font-normal text-center md:text-left lg:text-center">
                         All messages are sent via the servers, both providing better
                         metadata privacy and reliable asynchronous message delivery,
                         while avoiding many <a href="javascript:void(0)" data-show-overlay="simplex-network-overlay-1" class="open-overlay-btn">problems of P2P networks</a>.
@@ -1416,28 +1416,32 @@ window.addEventListener('scroll',changeHeaderBg);
                 </div>
             </div>
 
-            <div class="flex flex-col items-center ">
-                <div class="mb-[30px]">
+            <hr class="hidden md:block lg:hidden mx-5 dark:opacity-[0.2]">
+
+            <div class="flex flex-col md:flex-row lg:flex-col items-center md:gap-9 lg:gap-0">
+                <div class="mb-4 md:mb-0 lg:mb-8 md:flex-[1] flex items-center justify-center">
                     <img src="/img/new/network-2.svg" alt="" class="dark:hidden"/>
                     <img src="/img/new/network-2-dark.svg" alt="" class="hidden dark:block"/>
                 </div>
-                <div class="flex flex-col items-center justify-center">
-                    <p class="text-active-blue text-[20px] font-bold text-center">Unlike federated networks</p>
-                    <p class="text-black dark:text-white text-[16px] font-normal text-center mb-[32px]">
+                <div class="md:flex-[2] flex flex-col items-center justify-center">
+                    <p class="text-active-blue text-xl font-bold text-center md:text-left lg:text-center self-stretch">Unlike federated networks</p>
+                    <p class="text-black dark:text-white text-base font-normal text-center md:text-left lg:text-center">
                         SimpleX relay servers do NOT store user profiles, contacts and delivered messages,
                         do NOT connect to each other, and there is NO servers directory.
                     </p>
                 </div>
             </div>
 
-            <div class="flex flex-col items-center ">
-                <div class="mb-[30px]">
+            <hr class="hidden md:block lg:hidden mx-5 dark:opacity-[0.2]">
+
+            <div class="flex flex-col md:flex-row lg:flex-col items-center md:gap-9 lg:gap-0">
+                <div class="mb-4 md:mb-0 lg:mb-8 md:flex-[1] flex items-center justify-center">
                     <img src="/img/new/network-3.svg" alt="" class="dark:hidden"/>
                     <img src="/img/new/network-3-dark.svg" alt="" class="hidden dark:block"/>
                 </div>
-                <div class="flex flex-col items-center justify-center">
-                    <p class="text-active-blue text-[20px] font-bold text-center">SimpleX network</p>
-                    <p class="text-black dark:text-white text-[16px] font-normal text-center">
+                <div class="md:flex-[2] flex flex-col items-center justify-center">
+                    <p class="text-active-blue text-xl font-bold text-center md:text-left lg:text-center self-stretch">SimpleX network</p>
+                    <p class="text-black dark:text-white text-base font-normal text-center md:text-left lg:text-center">
                         servers provide <span class="text-active-blue">unidirectional queues</span>
                         to connect the users, but they have no visibility of the network connection graph &mdash; only the users do.
                     </p>
@@ -1476,12 +1480,12 @@ window.addEventListener('scroll',changeHeaderBg);
     }
 </style>
 
-<section id="simplex-explained" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[80px] px-5">
+<section id="simplex-explained" class="bg-primary-bg-light dark:bg-primary-bg-dark lg:h-[890px] py-[90px] px-5">
     <div class="container">
-        <p class="text-[35px] lg:text-[45px] text-center font-bold text-grey-black dark:text-white mb-[40px]">Simplex explained</p>
+        <p class="text-[35px] leading-[45px] md:leading-[55px] lg:text-[38px] text-center font-bold text-grey-black dark:text-white mb-9">Simplex explained</p>
 
         <!-- Tab links -->
-        <div class="tabs hidden md:flex gap-2 mb-16">
+        <div class="tabs hidden md:flex gap-2 mb-24">
             <div data-btn-index="0" class="flex-1 tab-button tab-1 p-2 text-[20px] text-center font-bold cursor-pointer active">1. What users experience</div>
             <div data-btn-index="1" class="flex-1 tab-button tab-2 p-2 text-[20px] text-center font-bold cursor-pointer">2. How does it work</div>
             <div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. What servers see</div>
@@ -1494,8 +1498,8 @@ window.addEventListener('scroll',changeHeaderBg);
                 <div class="swiper-slide h-[inherit]">
                     <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. What users experience</div>
                     <div class="flex flex-col justify-center items-center">
-                        <img class="h-[340px] my-16" src="/img/new/explained-1.svg" alt="" />
-                        <p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
+                        <img class="h-[340px] mb-[74px]" src="/img/new/explained-1.svg" alt="" />
+                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                             You can create contacts and groups, and have two-way conversations, as in any other messenger.
                         </p>
                         <p class="text-black dark:text-white text-[16px] font-normal text-center">
@@ -1507,8 +1511,8 @@ window.addEventListener('scroll',changeHeaderBg);
                 <div class="swiper-slide h-[inherit]">
                     <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. How does it work</div>
                     <div class="flex flex-col justify-center items-center">
-                        <img class="h-[340px] my-16" src="/img/new/explained-2.svg" alt="" />
-                        <p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
+                        <img class="h-[340px] mb-[74px]" src="/img/new/explained-2.svg" alt="" />
+                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                             For each connection you use two separate messaging queues to send and receive messages via different servers.
                         </p>
                         <p class="text-black dark:text-white text-[16px] font-normal text-center">
@@ -1520,8 +1524,8 @@ window.addEventListener('scroll',changeHeaderBg);
                 <div class="swiper-slide h-[inherit]">
                     <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. What servers see</div>
                     <div class="flex flex-col justify-center items-center">
-                        <img class="h-[340px] my-16" src="/img/new/explained-3.svg" alt="" />
-                        <p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
+                        <img class="h-[340px] mb-[74px]" src="/img/new/explained-3.svg" alt="" />
+                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                             The servers have separate anonymous credentials for each queue, and do not know which users they belong to.
                         </p>
                         <p class="text-black dark:text-white text-[16px] font-normal text-center">
@@ -1537,7 +1541,6 @@ window.addEventListener('scroll',changeHeaderBg);
 </section>
 
 <script>
-   
 window.addEventListener("load", function () {
     const simplexExplainedSwiper__bullets = document.querySelectorAll(".simplex-explained-swiper .swiper-pagination > span");
     const simplexExplainedSwiper__tabs = document.querySelectorAll("#simplex-explained .tabs .tab-button");
@@ -1570,69 +1573,69 @@ window.addEventListener("load", function () {
 
 
 
-<section id="comparison" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[85px] px-5">
+<section id="comparison" class="bg-secondary-bg-light dark:bg-secondary-bg-dark lg:h-[950px] py-[90px] px-5">
     <div class="text-grey-black dark:text-white container flex flex-col">
-        <p class="text-[35px] lg:text-[45px] text-center font-bold mb-10 lg:mb-20">Comparison with other protocols</p>
+        <p class="text-[35px] leading-[43px] md:leading-[55px] lg:leading-[36px] text-center font-bold mb-12 lg:mb-[90px]">Comparison with other protocols</p>
 
         <div class="w-full overflow-auto">
-            <table class="w-full border-separate border-spacing-x-5 border-spacing-y-2">
+            <table class="w-full border-separate border-spacing-x-5 border-spacing-y-2 mb-14">
                 <thead>
                     <tr>
                         <th></th>
-                        <th class="flex items-center justify-center">
-                            <img class="h-6 dark:hidden" alt="simplex logo" src="/img/new/logo-light.png"/>
-                            <img class="h-6 hidden dark:block" alt="simplex logo" src="/img/new/logo-dark.png"/>
+                        <th class="flex items-center justify-center pb-4">
+                            <img class="h-[34px] dark:hidden" alt="simplex logo" src="/img/new/logo-light.png"/>
+                            <img class="h-[34px] hidden dark:block" alt="simplex logo" src="/img/new/logo-dark.png"/>
                         </th>
-                        <th>Signal, big platforms</th>
-                        <th>XMPP, Matrix</th>
-                        <th>P2P protocols</th>
+                        <th class="pb-4">Signal, big platforms</th>
+                        <th class="pb-4">XMPP, Matrix</th>
+                        <th class="pb-4">P2P protocols</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
                         <td class="min-w-[210px]">Requires global identity</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - private</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>1</sup></td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>2</sup></td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>3</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - private</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>1</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>2</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>3</sup></td>
                     </tr>
                     <tr>
                         <td class="min-w-[210px]">Possibility of MITM</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - secure</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>4</sup></td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - secure</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>4</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
                     </tr>
                     <tr>
                         <td class="min-w-[210px]">Dependence on DNS</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - resilient</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - resilient</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No</td>
                     </tr>
                     <tr>
                         <td class="min-w-[210px]">Single or centralized network</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - decentralized</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - federated <sup>5</sup></td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>6</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - decentralized</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - federated <sup>5</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>6</sup></td>
                     </tr>
                     <tr>
                         <td class="min-w-[210px]">Central component or other network-wide attack</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - resilient</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>2</sup></td>
-                        <td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>7</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - resilient</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>2</sup></td>
+                        <td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>7</sup></td>
                     </tr>
                 </tbody>
             </table>
         </div>
 
-        <hr class="block my-12 mx-5 dark:opacity-[0.2]">
+        <hr class="block mb-8 mx-5 dark:opacity-[0.2]">
 
         <div>
             <div class="px-5">
-                <ol class="text-base leading-6 list-decimal list-inside">
+                <ol class="text-sm lg:text-base font-medium leading-6 list-decimal list-inside">
                     <li> Usually based on a phone number, in some cases on usernames</li>
                     <li> DNS-based addresses</li>
                     <li> Public key or some other globally unique ID</li>
@@ -1648,33 +1651,32 @@ window.addEventListener("load", function () {
 
 
 
-<section class="bg-primary-bg-light dark:bg-primary-bg-dark py-[85px] px-5">
+<section class="bg-primary-bg-light dark:bg-primary-bg-dark lg:h-[855px] py-[90px] px-5">
     <div class="container flex flex-col items-center">
-        <p class="text-[35px] lg:text-[45px] text-grey-black dark:text-white text-center font-bold mb-4"><span class="text-active-blue">Join</span> SimpleX</p>
-        <p class="text-black dark:text-white text-base text-center mb-10">We invite you to join the conversation</p>
+        <p class="text-[38px] leading-[36px] md:leading-[55px] text-grey-black dark:text-white text-center font-bold mb-5"><span class="text-active-blue">Join</span> SimpleX</p>
+        <p class="text-black dark:text-white text-base text-center mb-14">We invite you to join the conversation</p>
 
-        <div class="flex flex-col items-center gap-5 self-stretch mb-10">
+        <div class="flex flex-col items-center gap-5 self-stretch mb-12">
             <a href="https://www.reddit.com/r/SimpleXChat/" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border bg-[#D9ECFF]">Join the REDDIT community</a>
             <a href="https://github.com/simplex-chat" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border bg-[#D9ECFF]">Join us on GitHub</a>
             <a href="https://github.com/simplex-chat/simplex-chat#help-us-with-donations" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border-none bg-white dark:bg-[rgba(112,240,249,0.2)] border border-[#0053D0]">Donate here to help us</a>
         </div>
 
-        <p class="text-black dark:text-white text-base text-center mb-5">Sign up to receive our updates</p>
+        <p class="text-grey-black dark:text-white text-base text-center mb-7">Sign up to receive our updates</p>
 
-        <form class="flex items-center w-full max-w-[540px] mb-4"
+        <form class="flex items-center w-full max-w-[540px] mb-20"
             action="https://chat.us2.list-manage.com/subscribe/post?u=ddd892b258ae36e5438e6d4e1&amp;id=ad6037a2fe"
             method="post" target="_blank" novalidate>
-            <input name="EMAIL" type="text" class="h-[44px] rounded-l-[34px] bg-transparent border border-primary-light focus:outline-none text-primary-light dark:text-primary-dark text-base w-full max-w-[400px] px-5"
-                placeholder="Enter your email address">
+            <input name="EMAIL" type="text" class="h-[44px] rounded-l-[34px] bg-transparent border border-primary-light focus:outline-none text-primary-light dark:text-primary-dark text-base w-full max-w-[400px] px-5 placeholder:text-grey-black placeholder:dark:text-white placeholder:text-base placeholder:font-normal placeholder:tracking-[0.01em]" placeholder="Enter your email address">
             <span style="position: absolute; left: -5000px" aria-hidden="true">
                 <input type="text" name="b_ddd892b258ae36e5438e6d4e1_ad6037a2fe" tabindex="-1" value="" />
             </span>
             <input type="submit" class="h-[44px] rounded-r-[34px] bg-primary-light text-white text-center px-8">
         </form>
 
-        <hr class="block my-10 mx-5 dark:opacity-[0.2] w-full">
+        <hr class="block mb-7 mx-5 dark:opacity-[0.2] w-full">
 
-        <p class="text-black dark:text-white text-center mb-5">Get SimpleX</p>
+        <p class="text-grey-black dark:text-white text-center mb-7">Get SimpleX</p>
         <div class="flex items-center justify-center gap-4 flex-wrap">
             <a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
             <a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
diff --git a/invitation/index.html b/invitation/index.html
index 1fa8b6071e..13fbba4b05 100644
--- a/invitation/index.html
+++ b/invitation/index.html
@@ -388,33 +388,32 @@ window.addEventListener('scroll',changeHeaderBg);
 
 
 
-<section class="bg-primary-bg-light dark:bg-primary-bg-dark py-[85px] px-5">
+<section class="bg-primary-bg-light dark:bg-primary-bg-dark lg:h-[855px] py-[90px] px-5">
     <div class="container flex flex-col items-center">
-        <p class="text-[35px] lg:text-[45px] text-grey-black dark:text-white text-center font-bold mb-4"><span class="text-active-blue">Join</span> SimpleX</p>
-        <p class="text-black dark:text-white text-base text-center mb-10">We invite you to join the conversation</p>
+        <p class="text-[38px] leading-[36px] md:leading-[55px] text-grey-black dark:text-white text-center font-bold mb-5"><span class="text-active-blue">Join</span> SimpleX</p>
+        <p class="text-black dark:text-white text-base text-center mb-14">We invite you to join the conversation</p>
 
-        <div class="flex flex-col items-center gap-5 self-stretch mb-10">
+        <div class="flex flex-col items-center gap-5 self-stretch mb-12">
             <a href="https://www.reddit.com/r/SimpleXChat/" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border bg-[#D9ECFF]">Join the REDDIT community</a>
             <a href="https://github.com/simplex-chat" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border bg-[#D9ECFF]">Join us on GitHub</a>
             <a href="https://github.com/simplex-chat/simplex-chat#help-us-with-donations" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border-none bg-white dark:bg-[rgba(112,240,249,0.2)] border border-[#0053D0]">Donate here to help us</a>
         </div>
 
-        <p class="text-black dark:text-white text-base text-center mb-5">Sign up to receive our updates</p>
+        <p class="text-grey-black dark:text-white text-base text-center mb-7">Sign up to receive our updates</p>
 
-        <form class="flex items-center w-full max-w-[540px] mb-4"
+        <form class="flex items-center w-full max-w-[540px] mb-20"
             action="https://chat.us2.list-manage.com/subscribe/post?u=ddd892b258ae36e5438e6d4e1&amp;id=ad6037a2fe"
             method="post" target="_blank" novalidate>
-            <input name="EMAIL" type="text" class="h-[44px] rounded-l-[34px] bg-transparent border border-primary-light focus:outline-none text-primary-light dark:text-primary-dark text-base w-full max-w-[400px] px-5"
-                placeholder="Enter your email address">
+            <input name="EMAIL" type="text" class="h-[44px] rounded-l-[34px] bg-transparent border border-primary-light focus:outline-none text-primary-light dark:text-primary-dark text-base w-full max-w-[400px] px-5 placeholder:text-grey-black placeholder:dark:text-white placeholder:text-base placeholder:font-normal placeholder:tracking-[0.01em]" placeholder="Enter your email address">
             <span style="position: absolute; left: -5000px" aria-hidden="true">
                 <input type="text" name="b_ddd892b258ae36e5438e6d4e1_ad6037a2fe" tabindex="-1" value="" />
             </span>
             <input type="submit" class="h-[44px] rounded-r-[34px] bg-primary-light text-white text-center px-8">
         </form>
 
-        <hr class="block my-10 mx-5 dark:opacity-[0.2] w-full">
+        <hr class="block mb-7 mx-5 dark:opacity-[0.2] w-full">
 
-        <p class="text-black dark:text-white text-center mb-5">Get SimpleX</p>
+        <p class="text-grey-black dark:text-white text-center mb-7">Get SimpleX</p>
         <div class="flex items-center justify-center gap-4 flex-wrap">
             <a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
             <a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
diff --git a/js/script.js b/js/script.js
index 4c392b7a94..facc0c39ca 100644
--- a/js/script.js
+++ b/js/script.js
@@ -23,34 +23,38 @@ const isMobile = {
 
 const privateSwiper = new Swiper('.private-swiper', {
     slidesPerView: 1,
+    slidesPerGroup: 1,
     spaceBetween: 20,
-    // autoplay: {
-    //     delay: 3000,
-    // },
-
-    direction: 'horizontal',
+    allowTouchMove: true,
     scrollbar: {
-        el: ".swiper-scrollbar",
+        el: '.swiper-scrollbar',
+        draggable: true,
+        snapOnRelease: true,
         dragSize: 100,
     },
-
+    direction: 'horizontal',
     navigation: {
         nextEl: '.private-swiper-button-next',
         prevEl: '.private-swiper-button-prev',
     },
-
     breakpoints: {
-        1280: {
+        1400: {
             slidesPerView: 4,
+            slidesPerGroup: 4,
             spaceBetween: 20,
+            allowTouchMove: false,
         },
-        1024: {
+        1200: {
             slidesPerView: 3,
+            slidesPerGroup: 3,
             spaceBetween: 20,
+            allowTouchMove: true,
         },
         768: {
             slidesPerView: 2,
+            slidesPerGroup: 2,
             spaceBetween: 20,
+            allowTouchMove: true,
         }
     },
 });