diff --git a/apps/smp-server/static/index.html b/apps/smp-server/static/index.html
index 0fa0de38d..16679628b 100644
--- a/apps/smp-server/static/index.html
+++ b/apps/smp-server/static/index.html
@@ -11,14 +11,63 @@
     <meta http-equiv="onion-location" content="http://${onionHost}">
   </x-onionHost>
   <link rel="icon" type="image/png" sizes="96x96" href="/media/favicon.ico">
-  <link rel="stylesheet" href="/media/swiper-bundle.min.css">
-  <link href="/media/tailwind.css" rel="stylesheet">
+  <link rel="stylesheet" href="/media/tailwind.css">
   <link rel="stylesheet" href="/media/style.css">
-  <script src="/media/flag-anchor.js"></script>
+
+  <style>
+    table#config {
+      border-collapse: collapse;
+      margin-bottom: 4px;
+    }
+
+    th,
+    td {
+      padding: 7px 0;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    tr td:not(:last-child) {
+      width: 250px;
+      font-size: 17px;
+      font-family: Gilroy;
+      font-weight: 500;
+      color: #606C71;
+      padding-right: 20px;
+    }
+
+    @media screen and (max-width: 767px) {
+      tr td:not(:last-child) {
+        font-size: 16px;
+      }
+    }
+
+    .dark tr td:not(:last-child) {
+      color: #fff;
+    }
+
+    tr td:last-child {
+      font-size: 17px;
+      font-family: Gilroy;
+      font-weight: 300;
+    }
+
+    tr {
+      text-align: top;
+    }
+
+    tr a {
+      color: #0053D0;
+    }
+
+    .dark tr a {
+      color: #70F0F9;
+    }
+  </style>
 </head>
 
 <body class="bg-white dark:bg-[#0C0B13]">
-  <section class="w-full bg-transparent fixed top-0 z-50">
+  <section class="w-full bg-transparent sticky top-0 z-50">
     <header class="">
       <div class="flex items-center flex-row justify-end m-auto px-4 lg:px-7 h-[66px]"><a href="/"
           class="h-full hidden dark:hidden lg:flex items-center ltr:mr-auto rtl:ml-auto"><img
@@ -143,171 +192,125 @@
       window.addEventListener('scroll', changeHeaderBg);</script>
   </section>
 
-  <section
-    class="pt-[106px] py-[90px] hidden xl:block bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
+  <section class="py-[90px] block bg-secondary-bg-light dark:bg-secondary-bg-dark">
     <div class="container m-auto flex items-center justify-between px-5">
       <div class="flex flex-col items-start justify-center w-full">
-        <h1 class="text-[38px] leading-[43px] font-bold max-w-[500px] mb-[30px] primary-header-contact">Server
+        <h1 class="text-[42px] mb-[32px] leading-[43px] font-bold max-w-[500px] primary-header-contact">Server
           information</h1>
 
-        <h2 class="text-[20px] leading-[28px] text-[#606C71] dark:text-white font-bold max-w-[475px]">Configuration</h2>
-
-        <p class="text-grey-black dark:text-white text-base mb-[16px]">
-          <strong>Persistence:</strong> ${persistence}
-        </p>
-        <p class="text-grey-black dark:text-white text-base mb-[16px]">
-          <strong>Message expiration:</strong> ${messageExpiration}
-        </p>
-        <p class="text-grey-black dark:text-white text-base mb-[16px]">
-          <strong>Stats enabled:</strong> ${statsEnabled}
-        </p>
-        <p class="text-grey-black dark:text-white text-base mb-[16px]">
-          <strong>New queues allowed:</strong> ${newQueuesAllowed}
-        </p>
-        <p class="text-grey-black dark:text-white text-base mb-[16px]">
-          <strong>Basic auth enabled:</strong> ${basicAuthEnabled}
-        </p>
-
-        <h2 class="text-[20px] leading-[28px] text-[#606C71] dark:text-white font-bold max-w-[475px]">Public information
-        </h2>
-        <p class="text-grey-black dark:text-white text-base mb-[16px]">
-          <strong>Source code:</strong>
-          <a href="${sourceCode}" target="_blank">${sourceCode}</a>
-        </p>
-        <x-website>
-          <p class="text-grey-black dark:text-white text-base mb-[16px]">
-            <strong>Web site:</strong>
-            <a href="${website}" target="_blank">${website}</a>
-          </p>
-        </x-website>
-        <x-usageConditions>
-          <p class="text-grey-black dark:text-white text-base mb-[16px]">
-            <strong>Usage conditions:</strong>
-            <a href="${usageConditions}" target="_blank">${usageConditions}</a>
-          </p>
-        </x-usageConditions>
-        <x-usageAmendments>
-          <p class="text-grey-black dark:text-white text-base mb-[16px]">
-            <strong>Amendments:</strong>
-            <a href="${usageAmendments}" target="_blank">${usageAmendments}</a>
-          </p>
-        </x-usageAmendments>
-        <x-operator>
-          <p class="text-grey-black dark:text-white text-base mb-[16px]">
-            <strong>Operator:</strong> ${operatorEntity} (${operatorCountry})
-          </p>
-        </x-operator>
-        <x-admin>
-          <p class="text-grey-black dark:text-white text-base mb-[16px]">
-            <strong>Administrator contacts:</strong>
-          <ul class="text-grey-black dark:text-white text-base mb-[16px]">
-            <x-adminSimplex>
-              <li>SimpleX: <a href="${adminSimplex}">Open in the app</a></li>
-            </x-adminSimplex>
-            <x-adminEmail>
-              <li>Email: <a href="mailto:${adminEmail}">${adminEmail}</a></li>
-            </x-adminEmail>
-            <x-adminPGP>
-              <li>PGP: <a href="${adminPGP}">${adminPGPFingerprint}</a></li>
-            </x-adminPGP>
-          </ul>
-          </p>
-        </x-admin>
-        <x-complaints>
-          <p class="text-grey-black dark:text-white text-base mb-[16px]">
-            <strong>Contacts for complaints and feedback:</strong>
-          <ul class="text-grey-black dark:text-white text-base mb-[16px]">
-            <x-complaintsSimplex>
-              <li>SimpleX: <a href="${complaintsSimplex}">Open in the app</a></li>
-            </x-complaintsSimplex>
-            <x-complaintsEmail>
-              <li>Email: <a href="mailto:${complaintsEmail}">${complaintsEmail}</a></li>
-            </x-complaintsEmail>
-            <x-complaintsPGP>
-              <li>PGP: <a href="${complaintsPGP}">${complaintsPGPFingerprint}</a></li>
-            </x-complaintsPGP>
-          </ul>
-          </p>
-        </x-complaints>
-        <x-hosting>
-          <p class="text-grey-black dark:text-white text-base mb-[16px]">
-            <strong>Hosting:</strong> ${hostingEntity} (${hostingCountry})
-          </p>
-        </x-hosting>
-        <x-serverCountry>
-          <p class="text-grey-black dark:text-white text-base mb-[16px]">
-            <strong>Server country:</strong> ${serverCountry}
-          </p>
-        </x-serverCountry>
-
-        <hr class="block mb-7 mx-5 dark:opacity-[0.2] w-full">
-
-        <div class="flex items-center justify-center gap-4 flex-wrap"><a target="_blank"
-            href="https://apps.apple.com/us/app/simplex-chat/id1605771084"><img class="h-[40px] w-auto"
-              src="/media/apple_store.svg"></a><a target="_blank"
-            href="https://play.google.com/store/apps/details?id=chat.simplex.app"
-            title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/media/google_play.svg"></a><a
-            target="_blank" href="https://simplex.chat/fdroid" title="SimpleX F-Droid Repository"><img
-              class="h-[40px] w-auto" src="/media/f_droid.svg"></a><a target="_blank"
-            href="https://testflight.apple.com/join/DWuT2LQu"><img class="h-[40px] w-auto"
-              src="/media/testflight.png"></a><a target="_blank"
-            href="https://github.com/simplex-chat/simplex-chat/releases/latest/download/simplex.apk"><img
-              class="h-[40px] w-auto" src="/media/apk_icon.png"></a></div>
-      </div>
-      <!-- <div class="h-full pt-[30px] w-[630px] relative">
-        <div class="relative h-full w-[inherit] flex items-center justify-center">right</div>
-      </div> -->
-    </div>
-  </section>
-
-  <section
-    class="block xl:hidden pt-[106px] py-[90px] bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
-    <div class="container m-auto px-5">
-      <div class="flex flex-col items-center">
-        <h1 class="text-[28px] font-bold text-center max-w-[602px] mb-[40px] primary-header-contact">You received a
-          1-time link to connect on SimpleX Chat</h1>
-        <p class="text-[20px] leading-[28px] text-grey-black dark:text-white font-medium mb-[30px]">To make a
-          connection:</p>
-        <div
-          class="flex flex-col justify-center items-center p-4 w-full max-w-[468px] min-h-[131px] rounded-[30px] border-[1px] border-[#A8B0B4] dark:border-white border-opacity-60 mb-6 relative">
-          <p class="text-xl font-medium text-grey-black dark:text-white mb-4">Install SimpleX app</p>
-          <div class="flex flex-wrap items-center justify-center gap-2"><a class="apple-store-btn" target="_blank"
-              href="https://apps.apple.com/us/app/simplex-chat/id1605771084"><img class="h-[40px] w-auto"
-                src="/media/apple_store.svg"></a><a class="google-play-btn" target="_blank"
-              href="https://play.google.com/store/apps/details?id=chat.simplex.app"
-              title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/media/google_play.svg"></a><a
-              class="f-droid-btn" target="_blank" href="https://simplex.chat/fdroid"
-              title="SimpleX F-Droid Repository"><img class="h-[40px] w-auto" src="/media/f_droid.svg"></a></div>
-          <div
-            class="absolute bg-[#0197FF] h-[44px] w-[44px] rounded-full flex items-center justify-center top-0 left-0 translate-x-[-30%] translate-y-[-30%]">
-            <p class="text-base text-white font-bold leading-[36px]">1</p>
+        <div class="flex flex-col lg:flex-row gap-10 justify-between w-full">
+          <div>
+            <h2 class="text-[30px] mb-[20px] leading-[28px] text-[#606C71] dark:text-white font-bold max-w-[475px]">
+              Public information
+            </h2>
+            <table id="public-info">
+              <tr class="text-grey-black dark:text-white text-base">
+                <td>Source code:</td>
+                <td><a href="${sourceCode}" target="_blank">${sourceCode}</a></td>
+              </tr>
+              <x-website>
+                <tr class="text-grey-black dark:text-white text-base">
+                  <td>Web site:</td>
+                  <td><a href="${website}" target="_blank">${website}</a></td>
+                </tr>
+              </x-website>
+              <x-usageConditions>
+                <tr class="text-grey-black dark:text-white text-base">
+                  <td>Usage conditions:</td>
+                  <td><a href="${usageConditions}" target="_blank">${usageConditions}</a></td>
+                </tr>
+              </x-usageConditions>
+              <x-usageAmendments>
+                <tr class="text-grey-black dark:text-white text-base">
+                  <td>Amendments:</td>
+                  <td><a href="${usageAmendments}" target="_blank">${usageAmendments}</a></td>
+                </tr>
+              </x-usageAmendments>
+              <x-operator>
+                <tr class="text-grey-black dark:text-white text-base">
+                  <td>Operator:</td>
+                  <td>${operatorEntity} (${operatorCountry})</td>
+                </tr>
+              </x-operator>
+              <x-admin>
+                <tr class="text-grey-black dark:text-white text-base">
+                  <td>Administrator contacts:</td>
+                  <td>
+                    <ul class="text-grey-black dark:text-white text-base mb-[16px]">
+                      <x-adminSimplex>
+                        <li>SimpleX: <a href="${adminSimplex}">Open address</a></li>
+                      </x-adminSimplex>
+                      <x-adminEmail>
+                        <li>Email: <a href="mailto:${adminEmail}">${adminEmail}</a></li>
+                      </x-adminEmail>
+                      <x-adminPGP>
+                        <li>PGP: <a href="${adminPGP}">${adminPGPFingerprint}</a></li>
+                      </x-adminPGP>
+                    </ul>
+                  </td>
+                </tr>
+              </x-admin>
+              <x-complaints>
+                <tr class="text-grey-black dark:text-white text-base">
+                  <td>Complaints and feedback:</td>
+                  <td>
+                    <ul class="text-grey-black dark:text-white text-base mb-[16px]">
+                      <x-complaintsSimplex>
+                        <li>SimpleX: <a href="${complaintsSimplex}">Open address</a></li>
+                      </x-complaintsSimplex>
+                      <x-complaintsEmail>
+                        <li>Email: <a href="mailto:${complaintsEmail}">${complaintsEmail}</a></li>
+                      </x-complaintsEmail>
+                      <x-complaintsPGP>
+                        <li>PGP: <a href="${complaintsPGP}">${complaintsPGPFingerprint}</a></li>
+                      </x-complaintsPGP>
+                    </ul>
+                  </td>
+                </tr>
+              </x-complaints>
+              <x-hosting>
+                <tr class="text-grey-black dark:text-white text-base">
+                  <td>Hosting provider:</td>
+                  <td>${hostingEntity} (${hostingCountry})</td>
+                </tr>
+              </x-hosting>
+              <x-serverCountry>
+                <tr class="text-grey-black dark:text-white text-base">
+                  <td>Server country:</td>
+                  <td>${serverCountry}</td>
+                </tr>
+              </x-serverCountry>
+            </table>
           </div>
-        </div>
-        <div
-          class="flex flex-col justify-center items-center w-full max-w-[468px] h-[131px] rounded-[30px] border-[1px] border-[#A8B0B4] dark:border-white border-opacity-60 mb-6 relative">
-          <p class="text-xl font-medium text-grey-black dark:text-white mb-4">Connect in app</p><noscript>
-            <p class="text-xl font-medium text-grey-black dark:text-white mb-4">Please use the link in the mobile app
-            </p>
-          </noscript><a id="mobile_conn_req_uri"
-            class="bg-[#0053D0] text-white py-3 px-8 rounded-[34px] h-[44px] text-[16px] leading-[19px] tracking-[0.02em]"
-            href="simplex:/contact#/?v=2-5&amp;smp=smp%3A%2F%2FZKe4uxF4Z_aLJJOEsC-Y6hSkXgQS5-oc442JQGkyP8M%3D%40smp17.simplex.im%2FuE3hiE1Ex5DLGHyvuTqiXAQGtJGrnpcE%23%2F%3Fv%3D1-2%26dh%3DMCowBQYDK2VuAyEA9YqJUulogIHt4vEmml8acX42WLUYPgOH0_N9t6KtAgo%253D%26srv%3Dogtwfxyi3h2h5weftjjpjmxclhb5ugufa5rcyrmg7j4xlch7qsr5nuqd.onion&amp;e2e=v%3D2-3%26x3dh%3DMEIwBQYDK2VvAzkAVJr_Jp39wBBBifJXD74dvRvWFMksQpie-RIC-L6L4HpuheCISAm4KSPmqT1HyF-nBzx-dLhW8pE%3D%2CMEIwBQYDK2VvAzkA9uAuzN1AbDfEgklmm4Fyi1QwKz5hD_EW-BDuhBJEX5EyBvOLAT0PkhVPQsympocXVWi1PNcu0wI%3D">Open
-            Simplex app</a>
-          <div
-            class="absolute bg-[#0197FF] h-[44px] w-[44px] rounded-full flex items-center justify-center top-0 left-0 translate-x-[-30%] translate-y-[-30%]">
-            <p class="text-base text-white font-bold leading-[36px]">2</p>
-          </div>
-        </div>
-        <div
-          class="flex flex-col justify-center items-center w-full max-w-[468px] h-[131px] rounded-[30px] border-[1px] border-[#A8B0B4] dark:border-white border-opacity-60 relative">
-          <p class="text-xl font-medium text-grey-black dark:text-white max-w-[230px] text-center">Tap the<span
-              class="text-active-blue">‘connect’</span>button in the app</p>
-          <div
-            class="absolute bg-[#0197FF] h-[44px] w-[44px] rounded-full flex items-center justify-center top-0 left-0 translate-x-[-30%] translate-y-[-30%]">
-            <p class="text-base text-white font-bold leading-[36px]">3</p>
+
+          <div>
+            <h2 class="text-[30px] mb-[20px] leading-[28px] text-[#606C71] dark:text-white font-bold max-w-[475px]">
+              Configuration</h2>
+            <table id="config">
+              <tr class="text-grey-black dark:text-white text-base">
+                <td>Persistence:</td>
+                <td>${persistence}</td>
+              </tr>
+              <tr class="text-grey-black dark:text-white text-base">
+                <td>Message expiration:</td>
+                <td>${messageExpiration}</td>
+              </tr>
+              <tr class="text-grey-black dark:text-white text-base">
+                <td>Stats enabled:</td>
+                <td>${statsEnabled}</td>
+              </tr>
+              <tr class="text-grey-black dark:text-white text-base">
+                <td>New queues allowed:</td>
+                <td>${newQueuesAllowed}</td>
+              </tr>
+              <tr class="text-grey-black dark:text-white text-base">
+                <td>Basic auth enabled:</td>
+                <td>${basicAuthEnabled}</td>
+              </tr>
+            </table>
           </div>
         </div>
       </div>
-    </div>
   </section>
 
   <section id="join-simplex" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[90px] px-5">
@@ -505,14 +508,7 @@ <h1 class="text-[28px] font-bold text-center max-w-[602px] mb-[40px] primary-hea
     </div>
   </section>
 
-  <script src="/media/flag-anchor.js"></script>
   <script src="/media/qrcode.js"></script>
-  <script async="" defer="" src="/media/contact.js"></script>
-  <script>document.querySelectorAll('.d-none-if-js-disabled').forEach(el => el.classList.remove('d-none-if-js-disabled'));</script>
-  <script src="/media/animation.js"></script>
-  <script src="/media/swiper-bundle.min.js"></script>
-  <script src="/media/script.js"></script>
-
 </body>
 
 </html>
\ No newline at end of file
diff --git a/apps/smp-server/static/link.html b/apps/smp-server/static/link.html
index e23473d9e..cbab7324f 100644
--- a/apps/smp-server/static/link.html
+++ b/apps/smp-server/static/link.html
@@ -5,11 +5,10 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>SimpleX Chat - Invitation</title>
-  <meta name="description" content="">
   <meta name="Content-Type" content="text/html;charset=utf-8">
   <link rel="icon" type="image/png" sizes="96x96" href="/media/favicon.ico">
   <link rel="stylesheet" href="/media/swiper-bundle.min.css">
-  <link href="/media/tailwind.css" rel="stylesheet">
+  <link rel="stylesheet" href="/media/tailwind.css">
   <link rel="stylesheet" href="/media/style.css">
 </head>
 
@@ -140,8 +139,8 @@
   </section>
 
   <section
-    class="pt-[106px] py-[90px] hidden xl:block bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
-    <div class="container m-auto flex items-center justify-between px-5">
+    class="hidden xl:block h-screen pt-[66px] bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
+    <div class="container m-auto h-full flex items-center justify-between px-5">
       <div class="flex flex-col items-start justify-center w-full">
         <h1 class="text-[38px] leading-[43px] font-bold max-w-[500px] mb-[30px] primary-header-contact">You received a
           1-time link to connect on SimpleX Chat</h1>
@@ -180,6 +179,7 @@ <h1 class="text-[38px] leading-[43px] font-bold max-w-[500px] mb-[30px] primary-
       </div>
     </div>
   </section>
+
   <section
     class="block xl:hidden pt-[106px] py-[90px] bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
     <div class="container m-auto px-5">
@@ -229,7 +229,8 @@ <h1 class="text-[28px] font-bold text-center max-w-[602px] mb-[40px] primary-hea
       </div>
     </div>
   </section>
-  <section id="join-simplex" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[90px] px-5">
+
+  <section class="hidden md:block bg-secondary-bg-light dark:bg-secondary-bg-dark py-[20px]">
     <div class="container px-5">
       <div class="text-grey-black dark:text-white">
         <div class="hidden md:block xl:hidden for-tablet">
@@ -307,6 +308,7 @@ <h2 class="text-xl font-bold">If you already installed SimpleX Chat for the term
       </div>
     </div>
   </section>
+
   <section id="join-simplex" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[90px] px-5">
     <div class="container flex flex-col items-center">
       <h2
@@ -338,7 +340,6 @@ <h2 class="text-xl font-bold">If you already installed SimpleX Chat for the term
             class="h-[40px] w-auto" src="/media/apk_icon.png"></a></div>
     </div>
   </section>
-  <script>document.querySelectorAll('.d-none-if-js-disabled').forEach(el => el.classList.remove('d-none-if-js-disabled'));</script>
   <section class="bg-[#D9E7ED] dark:bg-[#0E2B57] py-[50px]">
     <div class="container">
       <div class="flex flex-col lg:flex-row justify-between">
@@ -501,15 +502,26 @@ <h2 class="text-xl font-bold">If you already installed SimpleX Chat for the term
         2020-2024 SimpleX | Open-Source Project</a>
     </div>
   </section>
+  <script>
+    const url = window.location.href
+    const messageElements = document.getElementsByClassName('primary-header-contact')
+
+    if (url.includes('/invitation')) {
+      for (let element of messageElements) {
+        element.textContent = 'You received a 1-time link to connect on SimpleX Chat'
+      }
+    } else {
+      for (let element of messageElements) {
+        element.textContent = 'You received an address to connect on SimpleX Chat'
+      }
+    }
+  </script>
 
-  <script src="/media/flag-anchor.js"></script>
   <script src="/media/qrcode.js"></script>
   <script async="" defer="" src="/media/contact.js"></script>
   <script>document.querySelectorAll('.d-none-if-js-disabled').forEach(el => el.classList.remove('d-none-if-js-disabled'));</script>
-  <script src="/media/animation.js"></script>
   <script src="/media/swiper-bundle.min.js"></script>
   <script src="/media/script.js"></script>
-
 </body>
 
 </html>
\ No newline at end of file
diff --git a/apps/smp-server/static/media/GilroyBold.woff2 b/apps/smp-server/static/media/GilroyBold.woff2
new file mode 100644
index 000000000..687474f86
Binary files /dev/null and b/apps/smp-server/static/media/GilroyBold.woff2 differ
diff --git a/apps/smp-server/static/media/GilroyLight.woff2 b/apps/smp-server/static/media/GilroyLight.woff2
new file mode 100644
index 000000000..f4d4fc3e0
Binary files /dev/null and b/apps/smp-server/static/media/GilroyLight.woff2 differ
diff --git a/apps/smp-server/static/media/GilroyMedium.woff2 b/apps/smp-server/static/media/GilroyMedium.woff2
new file mode 100644
index 000000000..895b6d4f1
Binary files /dev/null and b/apps/smp-server/static/media/GilroyMedium.woff2 differ
diff --git a/apps/smp-server/static/media/GilroyRegular.woff2 b/apps/smp-server/static/media/GilroyRegular.woff2
new file mode 100644
index 000000000..24465fb7d
Binary files /dev/null and b/apps/smp-server/static/media/GilroyRegular.woff2 differ
diff --git a/apps/smp-server/static/media/GilroyRegularItalic.woff2 b/apps/smp-server/static/media/GilroyRegularItalic.woff2
new file mode 100644
index 000000000..ef01c8d5d
Binary files /dev/null and b/apps/smp-server/static/media/GilroyRegularItalic.woff2 differ
diff --git a/apps/smp-server/static/media/animation.js b/apps/smp-server/static/media/animation.js
deleted file mode 100644
index 26217a8a7..000000000
--- a/apps/smp-server/static/media/animation.js
+++ /dev/null
@@ -1,130 +0,0 @@
-window.addEventListener("load", function () {
-  const imgPath = "/img/hero"
-  const fastImages = mkFastImages(0, 20);
-  const slowImages = mkSlowImages([
-    ["0005", 3],
-    ["0008", 1],
-    ["0009", 2],
-    ["0011", 3],
-    ["0014", 3],
-    ["0017", 1],
-    ["0018", 2],
-    ["0020", 2],
-    ["0022", 2],
-    ["0024", 3],
-    ["0027", 1],
-    ["0028", 2],
-    ["0030", 2],
-    ["0032", 3],
-    ["0035", 1],
-    ["0036", 2],
-    ["0038", 1],
-    ["0039", 1]
-  ])
-  
-  let complete = false;
-  run();
-  window.onload = run;
-
-  function mkFastImages(from, to) {
-    const seq = [];
-    for (let n = from; n <= to; n++) {
-      let img = "" + n;
-      img = "0".repeat(4 - img.length) + img;
-      seq.push([`${imgPath}/light/10fps/${img}.webp`, `${imgPath}/dark/10fps/${img}.webp`, 1]);
-    }
-    return seq;
-  }
-
-  function mkSlowImages(images) {
-    return images.map(([img, n]) => [`${imgPath}/light/2fps/${img}.webp`, `${imgPath}/dark/2fps/${img}.webp`, n])
-  }
-
-  // function setupScroll (imgBackground) {
-  //   const totalHeight = this.document.body.scrollHeight - this.window.innerHeight;
-  //   this.window.onscroll = () => {
-  //     let progressHeight = (window.pageYOffset / totalHeight) * 100;
-  //     if (progressHeight > 10) {
-  //       imgBackground.style.position = "absolute";
-  //       imgBackground.style.top = "100%";
-  //     } else {
-  //       imgBackground.style.position = "fixed";
-  //       imgBackground.style.top = "auto";
-  //     }
-  //   };
-  // }
-
-  async function run() {
-    const lightImageEl = document.getElementById("hero-phone-light");
-    const darkImageEl = document.getElementById("hero-phone-dark");
-    const preloadEl = document.getElementById("hero-phone-preload");
-    const imgBackground = document.getElementsByClassName("hero-phone-background")[0]
-    const videoEl = this.document.getElementById("hero-phone-video")
-    if (complete || !lightImageEl || !darkImageEl || !preloadEl || !imgBackground || !videoEl) return;
-    complete = true;
-    // setupScroll(imgBackground)
-    await preload(fastImages.concat(slowImages));
-    await animate(fastImages, 100);
-    await delay(500)
-    await animate(slowImages, 500);
-    // todo - this should happen on scroll, not when animation ends
-    lightImageEl.style.animationName = "big";
-    darkImageEl.style.animationName = "big";
-    videoEl.style.animationName = "bigvideo";
-    if (window.innerWidth > 1279) {
-      videoEl.style.display = "block";
-    }
-
-    async function preload(images) {
-      let imgEls = [];
-      let resolved = false;
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          if (!resolved) {
-            resolved = true;
-            resolve();
-          }
-        }, 2000);
-        for (const [lightImg, darkImg] of images) {
-          preloadImg(lightImg)
-          preloadImg(darkImg)
-        }
-
-        function preloadImg(img) {
-          const el = document.createElement("img");
-          el.src = img;
-          imgEls.push(el);
-          preloadEl.appendChild(el);
-          const loaded = () => {
-            imgEls = imgEls.filter((e) => e !== el);
-            if (imgEls.length === 0 && !resolved) {
-              resolved = true;
-              resolve();
-            }
-          };
-          el.addEventListener("load", loaded);
-          el.addEventListener("error", loaded);
-        }
-      });
-    }
-
-    async function animate(images, ms) {
-      let i = 0;
-      for (const [lightImg, darkImg, n] of images) {
-        lightImageEl.src = lightImg;
-        darkImageEl.src = darkImg;
-        i++;
-        if (ms == 500 && i > 16) {
-          // TODO this is hack, also this should happen on scroll, not during the animation
-          lightImageEl.style.animationName = "small";
-          darkImageEl.style.animationName = "small";
-        }
-        await delay(ms * n);
-      }
-    }
-
-    async function delay(ms) {
-      return new Promise((resolve) => setTimeout(resolve, ms));
-    }
-  }
-});
\ No newline at end of file
diff --git a/apps/smp-server/static/media/favicon.ico b/apps/smp-server/static/media/favicon.ico
new file mode 100644
index 000000000..c45f3acf0
Binary files /dev/null and b/apps/smp-server/static/media/favicon.ico differ
diff --git a/apps/smp-server/static/media/flag-anchor.js b/apps/smp-server/static/media/flag-anchor.js
deleted file mode 100644
index b66343945..000000000
--- a/apps/smp-server/static/media/flag-anchor.js
+++ /dev/null
@@ -1,9 +0,0 @@
-document.addEventListener("DOMContentLoaded", () => {
-    const flagAnchors = document.getElementsByClassName("flag-anchor")
-    Array.from(flagAnchors).forEach(flagAnchor => {
-        flagAnchor.addEventListener("click", (e) => {
-            e.preventDefault()
-            document.location = flagAnchor.href + location.hash
-        })
-    })
-})
\ No newline at end of file
diff --git a/apps/smp-server/static/media/script.js b/apps/smp-server/static/media/script.js
index ce2c4614e..aa5d35293 100644
--- a/apps/smp-server/static/media/script.js
+++ b/apps/smp-server/static/media/script.js
@@ -1,125 +1,8 @@
-const uniqueSwiper = new Swiper('.unique-swiper', {
-    slidesPerView: 1,
-    spaceBetween: 80,
-    allowTouchMove: true,
-    breakpoints: {
-        1400: {
-            allowTouchMove: false,
-        },
-        1200: {
-            allowTouchMove: true,
-        },
-        768: {
-            allowTouchMove: true,
-        }
-    },
-    direction: 'horizontal',
-    pagination: {
-        el: '.simplex-unique-swiper-pagination',
-        clickable: true,
-    },
-    navigation: {
-        nextEl: '.unique-swiper-button-next',
-        prevEl: '.unique-swiper-button-prev',
-    },
-});
-
 const isMobile = {
     Android: () => navigator.userAgent.match(/Android/i),
     iOS: () => navigator.userAgent.match(/iPhone|iPad|iPod/i)
 };
 
-const privateSwiper = new Swiper('.private-swiper', {
-    slidesPerView: 1,
-    slidesPerGroup: 1,
-    spaceBetween: 20,
-    allowTouchMove: true,
-    scrollbar: {
-        el: '.swiper-scrollbar',
-        draggable: true,
-        snapOnRelease: true,
-        dragSize: 100,
-    },
-    direction: 'horizontal',
-    navigation: {
-        nextEl: '.private-swiper-button-next',
-        prevEl: '.private-swiper-button-prev',
-    },
-    breakpoints: {
-        1400: {
-            slidesPerView: 4,
-            slidesPerGroup: 4,
-            spaceBetween: 20,
-            allowTouchMove: false,
-        },
-        1200: {
-            slidesPerView: 3,
-            slidesPerGroup: 3,
-            spaceBetween: 20,
-            allowTouchMove: true,
-        },
-        768: {
-            slidesPerView: 2,
-            slidesPerGroup: 2,
-            spaceBetween: 20,
-            allowTouchMove: true,
-        }
-    },
-    on: {
-        slideChange: function () {
-            const privateSwiperGlossaryTerms = document.querySelectorAll('.private-swiper .glossary-term');
-            privateSwiperGlossaryTerms.forEach(function (glossaryTerm) {
-                var tooltipId = glossaryTerm.getAttribute('data-glossary');
-                var tooltip = document.getElementById(tooltipId);
-                tooltip.style.visibility = 'hidden';
-                tooltip.style.opacity = '0';
-                const privateSwiper = glossaryTerm.closest('.private-swiper')
-                if (privateSwiper) glossaryTerm.closest('.card').classList.remove('hovered');
-            })
-        }
-    }
-});
-
-const simplexExplainedSwiper = new Swiper(".simplex-explained-swiper", {
-    slidesPerView: 1,
-    spaceBetween: 80,
-    allowTouchMove: true,
-    breakpoints: {
-        1400: {
-            allowTouchMove: false,
-        },
-        1200: {
-            allowTouchMove: true,
-        },
-        768: {
-            allowTouchMove: true,
-        }
-    },
-    direction: "horizontal",
-    pagination: {
-        el: ".simplex-explained-swiper-pagination",
-        clickable: true
-    },
-    on: {
-        slideChange: function () {
-            const explainedSwiperGlossaryTerms = document.querySelectorAll('.simplex-explained-swiper .glossary-term');
-            explainedSwiperGlossaryTerms.forEach(function (glossaryTerm) {
-                var tooltipId = glossaryTerm.getAttribute('data-glossary');
-                var tooltip = document.getElementById(tooltipId);
-                tooltip.style.visibility = 'hidden';
-                tooltip.style.opacity = '0';
-            })
-        }
-    }
-});
-
-function closeOverlay(e) {
-    e.target.closest('.overlay').classList.remove('flex');
-    e.target.closest('.overlay').classList.add('hidden');
-    document.body.classList.remove('lock-scroll');
-    history.replaceState(null, null, ' ');
-}
-
 window.addEventListener('click', clickHandler)
 
 if (isMobile.iOS) {
@@ -129,28 +12,7 @@ if (isMobile.iOS) {
 }
 
 function clickHandler(e) {
-    if (e.target.closest('.card')) {
-        e.target.closest('.card').classList.toggle('card-active');
-        e.target.closest('.card').classList.toggle('no-hover');
-    }
-
-    // ---------------For Overlay--------------------
-    else if (e.target.closest('.close-overlay-btn')) {
-        closeOverlay(e);
-    }
-    else if (e.target.closest('.overlay-card')) {
-        return;
-    }
-    else if (e.target.closest('.overlay')) {
-        closeOverlay(e);
-    }
-    else if (e.target.closest('.open-overlay-btn')) {
-        let id = e.target.closest('.open-overlay-btn').dataset.showOverlay;
-        window.location.hash = id;
-    }
-    // -----------------------------------------------
-    // ---------- For Contact & Invitation Page tabs
-    else if (e.target.closest('.contact-tab-btn')) {
+    if (e.target.closest('.contact-tab-btn')) {
         e.target.closest('.contact-tab').classList.toggle('active')
     }
 }
@@ -175,137 +37,3 @@ window.addEventListener('load', () => {
         fDroidBtn.classList.remove('hidden');
     }
 })
-
-function openOverlay() {
-    let hash = window.location.hash
-    if (hash) {
-        const id = hash.split('#')[1];
-        const el = document.getElementById(id)
-        if (!!el && el.classList.contains('overlay')) {
-            const scrollTo = el.getAttribute('data-scroll-to')
-            if (scrollTo) {
-                const scrollToEl = document.getElementById(scrollTo)
-                if (scrollToEl) scrollToEl.scrollIntoView(true)
-            }
-
-            const currentOpenedGlossaryOverlay = document.querySelector('.glossary-overlay.flex')
-            if (currentOpenedGlossaryOverlay) {
-                currentOpenedGlossaryOverlay.classList.remove('flex')
-                currentOpenedGlossaryOverlay.classList.add('hidden')
-            }
-
-            el.classList.remove('hidden')
-            el.classList.add('flex')
-            document.body.classList.add('lock-scroll')
-        }
-    }
-}
-
-function updatePointerEventsInPrivateSwiperCards() {
-    var privateSwiperCards = document.querySelectorAll('.private-swiper .card')
-
-    privateSwiperCards.forEach(function (card) {
-        var cardContent = card.querySelector('.card-content')
-
-        function updatePointerEvents() {
-            var cardContentGlossaryTerms = cardContent.querySelectorAll('.glossary-term')
-            cardContentGlossaryTerms.forEach(function (glossaryTerm) {
-                if (cardContent.offsetHeight >= 270) {
-                    glossaryTerm.style.pointerEvents = 'all'
-                } else {
-                    glossaryTerm.style.pointerEvents = 'none'
-                }
-            })
-        }
-        updatePointerEvents()
-
-        cardContent.addEventListener('click', updatePointerEvents)
-        cardContent.addEventListener('mousemove', updatePointerEvents)
-    })
-}
-
-function updateTooltipPosition(glossaryTerm, tooltip) {
-    var glossaryTermOffset = glossaryTerm.getBoundingClientRect()
-    var tooltipOffset = tooltip.getBoundingClientRect()
-
-    if (glossaryTermOffset.top >= tooltipOffset.height) {
-        tooltip.style.top = glossaryTermOffset.top - tooltipOffset.height + 'px'
-    } else {
-        tooltip.style.top = glossaryTermOffset.bottom + 'px'
-    }
-
-    var leftPosition = glossaryTermOffset.left + glossaryTerm.offsetWidth / 2 - tooltip.offsetWidth / 2
-    if (leftPosition < 0) {
-        tooltip.style.left = '0px'
-    } else if (leftPosition + tooltip.offsetWidth > window.innerWidth) {
-        tooltip.style.left = window.innerWidth - tooltip.offsetWidth + 'px'
-    } else {
-        tooltip.style.left = leftPosition + 'px'
-    }
-}
-
-function setupTooltip(glossaryTerm) {
-    var tooltipId = glossaryTerm.getAttribute('data-glossary')
-    var tooltip = document.getElementById(tooltipId)
-
-    function showTooltip() {
-        tooltip.style.visibility = 'visible'
-        tooltip.style.opacity = '1'
-        updateTooltipPosition(glossaryTerm, tooltip)
-        const privateSwiper = glossaryTerm.closest('.private-swiper')
-        if (privateSwiper) glossaryTerm.closest('.card').classList.add('hovered')
-    }
-
-    function hideTooltip() {
-        tooltip.style.visibility = 'hidden'
-        tooltip.style.opacity = '0'
-        const privateSwiper = glossaryTerm.closest('.private-swiper')
-        if (privateSwiper) glossaryTerm.closest('.card').classList.remove('hovered')
-        if (!glossaryTerm.matches(':hover') && !tooltip.matches(':hover')) {
-            glossaryTerm.classList.remove('active-term')
-            tooltip.removeEventListener('mouseover', showTooltip)
-            tooltip.removeEventListener('mouseout', hideTooltip)
-        }
-    }
-
-    let click = 0
-    glossaryTerm.addEventListener('mouseover', () => {
-        glossaryTerm.classList.add('active-term')
-        showTooltip()
-        tooltip.addEventListener('mouseover', showTooltip)
-        tooltip.addEventListener('mouseout', hideTooltip)
-    })
-    glossaryTerm.addEventListener('mouseout', function (event) {
-        click = 0
-        hideTooltip()
-    })
-    glossaryTerm.addEventListener('click', function (event) {
-        event.stopPropagation()
-        if (click == 1) {
-            hideTooltip()
-            click = 0
-        }
-        else {
-            showTooltip()
-            click = 1
-        }
-    })
-}
-
-window.addEventListener('load', () => {
-    openOverlay()
-    updatePointerEventsInPrivateSwiperCards()
-
-    window.addEventListener('scroll', function () {
-        let activeTerm = document.querySelector('.active-term')
-        if (activeTerm) {
-            var tooltipId = activeTerm.getAttribute('data-glossary')
-            var tooltip = document.getElementById(tooltipId)
-            updateTooltipPosition(activeTerm, tooltip)
-        }
-    })
-
-    const glossaryTerms = document.querySelectorAll('.glossary-term')
-    glossaryTerms.forEach(setupTooltip)
-})
-window.addEventListener('hashchange', openOverlay)
diff --git a/apps/smp-server/static/media/style.css b/apps/smp-server/static/media/style.css
index b9a77a59d..d9d2e829e 100644
--- a/apps/smp-server/static/media/style.css
+++ b/apps/smp-server/static/media/style.css
@@ -1,65 +1,55 @@
 @font-face {
   font-family: Gilroy;
-  src: url("/fonts/GilroyRegular/font.woff2") format("woff2"), url("webFonts/GilroyRegular/font.woff") format("woff");
+  src: url("GilroyRegular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: Gilroy;
-  src: url("/fonts/GilroyLight/font.woff2") format("woff2"), url("webFonts/GilroyLight/font.woff") format("woff");
+  src: url("GilroyLight.woff2") format("woff2");
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: Gilroy;
-  src: url("/fonts/GilroyMedium/font.woff2") format("woff2"), url("webFonts/GilroyMedium/font.woff") format("woff");
+  src: url("GilroyMedium.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: Gilroy;
-  src: url("/fonts/GilroyBold/font.woff2") format("woff2"), url("webFonts/GilroyBold/font.woff") format("woff");
+  src: url("GilroyBold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: Gilroy;
-  src: url("/fonts/GilroyRegularItalic/font.woff2") format("woff2"), url("webFonts/GilroyRegularItalic/font.woff") format("woff");
+  src: url("GilroyRegularItalic.woff2") format("woff2");
   font-weight: 400;
   font-style: italic;
 }
 
 html {
   scroll-behavior: smooth;
-  font-family: Gilroy, Helvetica, sans-serif;;
+  font-family: Gilroy, Helvetica, sans-serif;
+  ;
   letter-spacing: 0.003em;
 }
 
-img{
+img {
   user-select: none;
-  -webkit-user-select: none; /* For Safari and older Chrome versions */
-  -moz-user-select: none; /* For Firefox */
-  -ms-user-select: none; /* For Internet Explorer and Edge */
+  -webkit-user-select: none;
+  /* For Safari and older Chrome versions */
+  -moz-user-select: none;
+  /* For Firefox */
+  -ms-user-select: none;
+  /* For Internet Explorer and Edge */
 }
 
-/* #comparison::before {
-  display: block;
-  content: " ";
-  margin-top: -80px;
-  height: 120px;
-  visibility: hidden;
-  pointer-events: none;
-} */
-
-/* .nav-button-active{
-    background-color: #00C8FB;
-    color: #fff;
-} */
-
 /* NEW SITE */
 .container,
 .container-fluid,
@@ -152,52 +142,34 @@ img{
   display: inherit;
 }
 
-.dark .unique-swiper .border-gradient{
-  background:
-    linear-gradient(#0C0B13, #0C0B13) padding-box,
-    linear-gradient(to bottom, transparent, #01F1FF 58%) border-box;
-  border: 1px solid transparent;
-}
-
-/* Nav and Menu */
-#why-simplex::before,
-#features::before,
-#privacy::before,
-#network::before {
-  display: block;
-  content: " ";
-  position: absolute;
-  top: -26px;
-  height: 66px;
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.menu-link{
+.menu-link {
   font-size: 16px;
   line-height: 33.42px;
   color: #0D0E12;
 }
-.dark .menu-link{
+
+.dark .menu-link {
   color: #fff;
 }
 
-.nav-link ul li a.active{
+.nav-link ul li a.active {
   color: #0053D0;
 
 }
-.dark .nav-link ul li a.active{
+
+.dark .nav-link ul li a.active {
   color: #66D9E2;
 }
 
 @media (min-width:1024px) {
+
   .nav-link-text,
   .menu-link {
     display: inline-block;
     position: relative;
     color: #0D0E12;
   }
-  
+
   .nav-link-text::before,
   .active .nav-link-text::before,
   .menu-link::before {
@@ -210,10 +182,11 @@ img{
     /* background-color: initial; */
     transition: width 0.25s ease-out;
   }
-  
+
   .menu-link::before {
     background-color: #0D0E12;
   }
+
   .dark .menu-link::before {
     background-color: #fff;
   }
@@ -237,7 +210,7 @@ img{
   color: #505158;
 }
 
-.sub-menu .no-hover{
+.sub-menu .no-hover {
   color: #505158 !important;
 }
 
@@ -267,16 +240,6 @@ header nav {
   transform: rotate(180deg);
 }
 
-/* @media (max-width: 1400px) {
-    .landing-page-header-article-paragraph {
-        width: 21rem;
-    }
-
-    .socials {
-        flex-wrap: nowrap;
-    }
-} */
-
 @media (min-width:1024px) {
 
   .nav-link:hover .sub-menu,
@@ -313,216 +276,17 @@ header nav {
     opacity: 1;
     transform: translateX(0);
   }
-
-  .flag-container .sub-menu{
-    max-height: fit-content;
-  }
 }
 
 .lock-scroll {
   overflow: hidden;
 }
 
-/* Swipe Sections */
-.hash-number {
-  background: linear-gradient(251.16deg, #53C1FF 1.1%, #0053D0 100.82%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.swiper-button-disabled{
-  opacity: 0;
-  pointer-events: none;
-  display: none !important;
-}
-
-@media (max-width: 767px) {
-  .swiper-button-next, .swiper-button-prev {
-    opacity: 0;
-    pointer-events: none;
-    display: none !important;
-  }
-}
-
-.swiper-pagination-bullet {
-  height: 14.31px;
-  width: 14.31px;
-  margin: 0 5px !important;
-}
-.dark .swiper-pagination-bullet{
-  background: #D4D4D433;
-  opacity: .8;
-}
-
-.swiper-pagination-bullet-active{
-  opacity: 1 !important;
-}
-.swiper-pagination-bullet-active {
-  background-color: #0197FF !important;
-}
-.dark .swiper-pagination-bullet-active{
-  background-color: #70F0F9 !important;
-}
-
-.swiper-button-next,
-.swiper-button-prev {
-  height: 40px;
-  width: 40px;
-}
-
-.swiper-button-disabled {
-  display: none;
-}
-
-.unique-swiper .swiper-slide,
-.unique-swiper .swiper-wrapper{
-  height: inherit;
-}
-
-.swiper-scrollbar-horizontal {
-  margin-top: 40px !important;
-  width: 302.06px !important;
-  height: 7.73px !important;
-  left: 50% !important;
-  transform: translateX(-50%) !important;
-  transform: translateX(-50%) !important;
-}
-
-.swiper-scrollbar-drag {
-  /* width: 112px !important; */
-  height: 8px !important;
-  background-color: #0197FF;
-}
-.dark .swiper-scrollbar-drag{
-  background-color: #70F0F9;
-}
-
-.swiper-rtl .swiper-button-prev{
-  right: 0 !important;
-}
-
-.swiper-rtl .swiper-button-next{
-  left: 0 !important;
-}
-
-/* What makes simplex private */
-.card{
-  cursor: pointer;
-}
-
-.card,
-.card > div:nth-child(2),
-.card > div:nth-child(1) {
-  transition: all .5s ease;
-}
-
-.card > div:nth-child(2) > *:nth-child(2),
-.card > div:nth-child(2) > *:nth-child(3) {
-  opacity: 0;
-  max-height: 0;
-  transform: translateY(20px);
-  transition: all .5s ease-out;
-}
-.card > div:nth-child(2) > *:nth-child(3) {
-  transform: translateY(40px);
-}
-
-.card:not(.no-hover):hover > div:nth-child(1),
-.card.hovered > div:nth-child(1) {
-  height: 200px;
-}
-.card:not(.no-hover):hover > div:nth-child(2),
-.card.hovered > div:nth-child(2) {
-  height: 270px;
-}
-.card.card-active > div:nth-child(2) {
-  height: 480px;
-}
-
-.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),
-.card:not(.no-hover).hovered > div:nth-child(2) > *:nth-child(2),
-.card:not(.no-hover).hovered > div:nth-child(2) > *:nth-child(3) {
-  opacity: 1;
-  max-height: 480px;
-  transform: translateY(0px);
-}
-
-.card:not(.no-hover):hover > div:nth-child(2) > *:nth-child(3),
-.card:not(.no-hover).hovered > div:nth-child(2) > *:nth-child(3) {
-  opacity: 0;
-}
-
-
-/* SimpleX Unique */
-.simplex-unique-card .card-content{
-  transition: all .5s ease-out;
-}
-@media (max-width: 767px) {
-  .simplex-unique-card .card-content .content-body{
-    height: 0;
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(80px);
-    transition: all .7s ease;
-  }
-  .simplex-unique-card.active-card .card-content .content-body{
-    max-height: 540px;
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0px);
-  }
-  .simplex-unique-card.active-card .card-content{
-    height: 540px;
-  }
-  .open-card-btn svg,
-  .close-card-btn svg{
-    transition: all .5s ease;
-  }
-  .open-card-btn:hover svg,
-  .close-card-btn:hover svg{
-    transform: rotate(180deg);
-  }
-}
-
-
-/* comparison */
-#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;
-}
-
-[dir="rtl"] #comparison table tbody tr > td:first-child{
-  text-align: right;
-}
-
-@media (min-width: 1024px) {
-  #comparison table tbody tr > td:first-child{
-    font-size: 18px;
-    line-height: 36px;
-  }  
-}
-
 /* hero */
-header{
+header {
   transition: all .7s ease;
 }
+
 .primary-header {
   background: linear-gradient(270deg, #0053D0 35.85%, #0197FF 94.78%);
   -webkit-background-clip: text;
@@ -530,113 +294,36 @@ header{
   background-clip: text;
   text-shadow: 0px 4px 74px #e9e7e2;
 }
-.dark .primary-header{
-  background: linear-gradient(270deg,#70F0F9 100%, #70F0F9 100%);
+
+.dark .primary-header {
+  background: linear-gradient(270deg, #70F0F9 100%, #70F0F9 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   text-shadow: none;
 }
+
 .secondary-header {
   color: #606c71;
   text-shadow: 0px 4px 74px #e9e7e2;
 }
-.dark .secondary-header{
+
+.dark .secondary-header {
   color: #fff;
   text-shadow: none;
 }
-.hero-phone-background {
-  background-image: url("/img/new/bg_gfx.png");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  /* width: 644px;
-  height: 644px;
-  margin-bottom: 5rem; */
-
-
-  /* position: fixed; */
-
-  /* justify-content: center;
-  align-items: center;
-  align-content: center;
-  justify-items: center;
-  */
-}
-#hero-phone-light, #hero-phone-dark {
-  position: relative;
-  animation-name: none;
-  animation-duration: 2s;
-  animation-fill-mode: forwards;
-}
-
-#hero-phone-video {
-    /* position: absolute;
-    border-radius: 10px;
-    background-color: black;
-    animation-name: none; */
-    /* border-top-right-radius: 25px; */
-    /* border-top-left-radius: 32px; */
-    animation-duration: 2s;
-    animation-fill-mode: forwards;
-    /* height: 580px;
-    width: 256px; */
-    /* margin-left: 0.3rem;
-    margin-bottom: 0.1rem; */
-}
 
 .description {
-    width: 31rem;
-}
-
-@media (max-width: 1400px) {
-    /* #hero-phone-video {
-        border-radius: 15px;
-        height: 500px;
-        width: 227px;
-        margin-bottom: 4.7rem;
-      } */
+  width: 31rem;
 }
 
-@keyframes small {
-  0% {
-    transform: scale(1);
-  }
-
-  100% {
-    transform: scale(0.66);
-  }
-}
-@keyframes big {
-  0% {
-    transform: scale(0.66);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-@keyframes bigvideo {
-  0% {
-    transform: scale(0.66);
-    opacity: 0;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-/* Overlays */
-.overlay a,
-p a{
+p a {
   color: #0053D0;
   text-decoration: underline;
   text-underline-offset: 2px;
 }
-.dark .overlay a,
-.dark p a{
+
+.dark p a {
   color: #70F0F9;
 }
 
@@ -648,19 +335,23 @@ p a{
   background-clip: text;
   text-shadow: 0px 4px 74px #e9e7e2;
 }
-.dark .primary-header-contact{
-  background: linear-gradient(270deg,#70F0F9 100%, #70F0F9 100%);
+
+.dark .primary-header-contact {
+  background: linear-gradient(270deg, #70F0F9 100%, #70F0F9 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   text-shadow: none;
 }
+
 .secondary-header-contact {
   text-shadow: 0px 4px 74px #e9e7e2;
 }
+
 .dark .secondary-header-contact {
   text-shadow: none;
 }
+
 .content_copy_with_tooltip {
   background-color: #f8f8f6;
   border-radius: 50px;
@@ -669,14 +360,17 @@ p a{
   margin-top: 16px;
   margin-bottom: 16px;
 }
+
 .content_copy_with_tooltip .tooltip {
   vertical-align: -6px;
 }
+
 .content_copy_with_tooltip .content {
   font-size: 15px;
 }
-.contact-tab > .contact-tab-content,
-.job-tab > .job-tab-content{
+
+.contact-tab>.contact-tab-content,
+.job-tab>.job-tab-content {
   opacity: 0;
   max-height: 0;
   transition: all 0.5s ease;
@@ -684,280 +378,33 @@ p a{
   transform: translateY(10px);
   overflow: hidden;
 }
+
 .contact-tab svg,
-.job-tab svg{
+.job-tab svg {
   transform: rotate(-180deg);
   transition: all .5s ease;
 }
-.contact-tab.active > .contact-tab-content,
-.job-tab.active > .job-tab-content{
+
+.contact-tab.active>.contact-tab-content,
+.job-tab.active>.job-tab-content {
   opacity: 1;
   max-height: 300px;
   visibility: visible;
   transform: translateY(0px);
 }
-.for-tablet .contact-tab.active > .contact-tab-content,
-.for-tablet .job-tab.active > .job-tab-content{
+
+.for-tablet .contact-tab.active>.contact-tab-content,
+.for-tablet .job-tab.active>.job-tab-content {
   min-height: 450px;
 }
+
 .contact-tab.active svg,
 .contact-tab:hover svg,
 .job-tab.active svg,
-.job-tab:hover svg{
+.job-tab:hover svg {
   transform: rotate(0deg);
 }
 
-/* Glossary */
-.glossary-term{
-  display: inline-block;
-  text-decoration: underline;
-  text-decoration-style: dashed;
-  text-underline-offset: 3px;
-  position: relative;
-  z-index: 10000;
-}
-
-.glossary-term::before{
-  content: '';
-  position: absolute;
-  top: -5px;
-  bottom: -5px;
-  left: 0;
-  right: 0;
-  opacity: 0;
-  z-index: 9;
-}
-
-.glossary-tooltip {
-  visibility: hidden;
-  opacity: 0;
-  position: fixed;
-  width: 320px;
-  max-width: 100%;
-  z-index: 10001; 
-  transition: opacity .5s;
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-.glossary-tooltip .tooltip-content{
-  background-color: #fff;
-  color: #000;
-  text-align: left;
-  padding: .8rem 1.2rem;
-  border-radius: 7px;
-  font-size: 14px;
-  line-height: 1.3rem;
-  box-shadow: 0 5px 10px rgba(0,0,0,.08);
-}
-
-.dark .glossary-tooltip .tooltip-content{
-  background-color: #000;
-  color: #fff;
-  box-shadow: none;
-}
-
-.tooltip-title{
-  margin-bottom: 0.5rem;
-  color: #0197FF;
-  font-weight: 600;
-  font-size: 1.1rem;
-}
-
-.dark .tooltip-title{
-  color: #70F0F9;
-}
-
-.glossary-tooltip .read-more-btn{
-  color: #0053D0;
-  display: block;
-  text-decoration: underline;
-  margin-top: .8rem;
-  text-underline-offset: 2px;
-}
-
-.dark .glossary-tooltip .read-more-btn{
-  color: #70F0F9;
-}
-
-.glossary-overlay{
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background-color: transparent;
-  align-items: center;
-  justify-content: center;
-  padding: 0.75rem;
-  z-index: 10005;
-}
-
-@media screen and (min-width: 768px) {
-  .glossary-overlay{
-    padding: 2.5rem;
-  }
-}
-
-.glossary-overlay::before {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color:#F3F6F7;
-  opacity: 0.9;
-}
-
-.dark .glossary-overlay::before {
-  content: '';
-  background-color: #0C0B13;
-}
-
-.glossary-overlay .overlay-card{
-  width: 100%;
-  background-color: white;
-  opacity: 1;
-  height: 100%;
-  z-index: 10006;
-  border-radius: 0.375rem;
-  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.2);
-  padding: 2.5rem 1.5rem;
-  overflow: auto;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.dark .glossary-overlay .overlay-card{
-  background-color: #17203D;
-}
-
-@media (min-width: 640px) {
-  .glossary-overlay .overlay-card{
-    padding: 3.5rem;
-  }
-}
-
-@media (min-width: 768px) {
-  .glossary-overlay .overlay-card{
-    width: fit-content;
-    max-width: 558px;
-    height: fit-content;
-    max-height: 660px;
-  }
-}
-
-.glossary-overlay .overlay-card .overlay-title{
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-  font-weight: 700;
-  margin-bottom: 1rem;
-  margin-bottom: 1.5rem;
-  --tw-text-opacity: 1;
-  color: rgb(1 151 255 / var(--tw-text-opacity));
-}
-
-.glossary-overlay .overlay-card .overlay-content{
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: #3F484B;
-}
-
-.dark .glossary-overlay .overlay-card .overlay-content{
-  color: #fff;
-}
-
-.close-overlay-btn{
-  fill: #3F484B;
-  position: fixed;
-  right: 1.25rem;
-  top: 1.25rem;
-  cursor: pointer;
-}
-
-.dark .close-overlay-btn{
-  fill: #fff;
-}
-
-.glossary-overlay ul {
-  overflow-x: auto;
-}
-
-.glossary-overlay ul,
-.glossary-overlay ol {
-  list-style-position: inside;
-  overflow: auto;
-  margin: 1rem 0;
-  /* padding-left: 1rem; */
-}
-
-.glossary-overlay ul li,
-.glossary-overlay ol li {
-  margin-right: 0;
-  margin-left: 0;
-  -webkit-margin-start: 1.1rem;
-  color: #000;
-}
-
-.dark .glossary-overlay ul li,
-.dark .glossary-overlay ol li {
-  color: #fff;
-}
-
-.glossary-overlay ul li::marker,
-.glossary-overlay ol li::marker {
-  color: black;
-}
-
-.dark .glossary-overlay ul li::marker,
-.dark .glossary-overlay ol li::marker {
-  color: white;
-}
-
-.glossary-overlay ul li a,
-.glossary-overlay ol li a {
-  line-height: 30px;
-}
-
-.glossary-overlay ul li {
-  list-style: disc;
-}
-
-.glossary-overlay ol li {
-  list-style: decimal;
-}
-
-/* media queries for hero section for short height screens */
-.hero-section-1{
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
-@media screen and (max-height: 760px) and (min-width: 1280px), screen and (max-height: 860px) and (min-width: 1280px) and (max-width: 1399px) {
-  .hero-section-1{
-    height: 100%;
-  }
-
-  h1{
-    font-size: 48px !important;
-  }
-  h2{
-    font-size: 36px !important;
-  }
-}
-
-@media screen and (max-height: 780px) {
-  .hero-phone-background{
-    height: 100%;
-    margin-top: 2rem;
-    margin-bottom: 4rem;
-    top: calc(66px + 2rem);
-  }
-}
-
-.d-none-if-js-disabled{
+.d-none-if-js-disabled {
   display: none !important;
 }
\ No newline at end of file
diff --git a/apps/smp-server/static/media/tailwind.css b/apps/smp-server/static/media/tailwind.css
index 34d10c476..04ea69992 100644
--- a/apps/smp-server/static/media/tailwind.css
+++ b/apps/smp-server/static/media/tailwind.css
@@ -784,6 +784,10 @@ video {
   margin-bottom: 30px;
 }
 
+.mb-\[32px\] {
+  margin-bottom: 32px;
+}
+
 .mb-\[36px\] {
   margin-bottom: 36px;
 }
@@ -1688,6 +1692,11 @@ video {
   padding-bottom: 50px;
 }
 
+.py-\[70px\] {
+  padding-top: 70px;
+  padding-bottom: 70px;
+}
+
 .py-\[75px\] {
   padding-top: 75px;
   padding-bottom: 75px;
@@ -1797,6 +1806,10 @@ video {
   font-size: 28px;
 }
 
+.text-\[30px\] {
+  font-size: 30px;
+}
+
 .text-\[35px\] {
   font-size: 35px;
 }
@@ -1805,6 +1818,10 @@ video {
   font-size: 38px;
 }
 
+.text-\[42px\] {
+  font-size: 42px;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -3009,6 +3026,11 @@ video {
     font-size: 16px;
   }
 
+  .xl\:bg-secondary-bg-light {
+    --tw-bg-opacity: 1;
+    background-color: rgb(243 246 247 / var(--tw-bg-opacity));
+  }
+
   :is([dir="ltr"] .ltr\:xl\:ml-10) {
     margin-left: 2.5rem;
   }
@@ -3028,4 +3050,9 @@ video {
   :is([dir="rtl"] .xl\:rtl\:text-right) {
     text-align: right;
   }
+
+  :is(.dark .dark\:xl\:bg-secondary-bg-dark) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(17 24 47 / var(--tw-bg-opacity));
+  }
 }
diff --git a/simplexmq.cabal b/simplexmq.cabal
index 59dd6613f..5377fe37f 100644
--- a/simplexmq.cabal
+++ b/simplexmq.cabal
@@ -30,13 +30,17 @@ extra-source-files:
     cbits/sntrup761.h
     apps/smp-server/static/index.html
     apps/smp-server/static/link.html
-    apps/smp-server/static/media/animation.js
     apps/smp-server/static/media/apk_icon.png
     apps/smp-server/static/media/apple_store.svg
     apps/smp-server/static/media/contact.js
     apps/smp-server/static/media/contact_page_mobile.png
     apps/smp-server/static/media/f_droid.svg
-    apps/smp-server/static/media/flag-anchor.js
+    apps/smp-server/static/media/favicon.ico
+    apps/smp-server/static/media/GilroyBold.woff2
+    apps/smp-server/static/media/GilroyLight.woff2
+    apps/smp-server/static/media/GilroyMedium.woff2
+    apps/smp-server/static/media/GilroyRegular.woff2
+    apps/smp-server/static/media/GilroyRegularItalic.woff2
     apps/smp-server/static/media/google_play.svg
     apps/smp-server/static/media/logo-dark.png
     apps/smp-server/static/media/logo-light.png

Source code:	${sourceCode}
Web site:	${website}
Usage conditions:	${usageConditions}
Amendments:	${usageAmendments}
Operator:	${operatorEntity} (${operatorCountry})
Administrator contacts:	+ + + SimpleX: Open address + + + Email: ${adminEmail} + + + PGP: ${adminPGPFingerprint} + + +
Complaints and feedback:	+ + + SimpleX: Open address + + + Email: ${complaintsEmail} + + + PGP: ${complaintsPGPFingerprint} + + +
Hosting provider:	${hostingEntity} (${hostingCountry})
Server country:	${serverCountry}
Persistence:	${persistence}
Message expiration:	${messageExpiration}
Stats enabled:	${statsEnabled}
New queues allowed:	${newQueuesAllowed}
Basic auth enabled:	${basicAuthEnabled}