From 830da15e354ee03c578cd05b3a2aa7068a1fa19d Mon Sep 17 00:00:00 2001
From: Dmytro Antonyuk <dmytro.antoniuk@softwarewest.com>
Date: Tue, 14 Nov 2023 13:10:24 +0200
Subject: [PATCH 1/4] no index

---
 .idea/workspace.xml | 56 ++++++++++++++++++++++-----------------------
 static/robots.txt   |  2 ++
 templates/base.html |  1 +
 3 files changed, 30 insertions(+), 29 deletions(-)
 create mode 100644 static/robots.txt

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 2230539b..77b88d52 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,43 +5,28 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="b9871119-7d48-43df-9f66-6fd91d65a1cb" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/sass/_download-button.scss" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/sass/_freedom-section.scss" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/sass/_hero.scss" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/sass/_open-map.scss" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/sass/_site-sections.scss" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/sass/_top-menu.scss" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/static/images/arrow-link.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/static/images/arrow-link.svg" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/static/images/hero/hero-bg.jpg" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/static/images/hero/hero-image.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/static/images/open-map/open-map-bg.jpg" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/static/images/open-map/open-map-logo.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/static/images/sections/free-and-builty-by-community-banner.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/static/images/sections/no-tracking-banner.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/static/images/sections/save-your-battery-banner.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/static/images/sections/search-and-plan-route-banner.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/templates/freedom_section.html" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/templates/hero.html" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/templates/index-old.html" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/templates/open_map.html" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/templates/site_sections.html" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/templates/ui/download-button.html" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/templates/ui/logo.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/content/_index.md" beforeDir="false" afterPath="$PROJECT_DIR$/content/_index.md" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/sass/_top_menu.scss" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/sass/main.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/main.scss" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/static/robots.txt" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/templates/base.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/base.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/templates/bottom_menu.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/bottom_menu.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/templates/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/index.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/templates/top_menu.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/top_menu.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="HTML File" />
+      </list>
+    </option>
+  </component>
   <component name="Git.Settings">
+    <option name="RECENT_BRANCH_BY_REPOSITORY">
+      <map>
+        <entry key="$PROJECT_DIR$" value="light-mode" />
+      </map>
+    </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
   <component name="MarkdownSettingsMigration">
@@ -57,6 +42,7 @@
   </component>
   <component name="PropertiesComponent"><![CDATA[{
   "keyToString": {
+    "DefaultHtmlFileTemplate": "HTML File",
     "RunOnceActivity.OpenProjectViewOnStart": "true",
     "RunOnceActivity.ShowReadmeOnStart": "true",
     "WebServerToolWindowFactoryState": "false",
@@ -68,6 +54,7 @@
     "node.js.selected.package.stylelint": "E:\\organicmaps.github.io\\node_modules\\stylelint",
     "node.js.selected.package.tslint": "(autodetect)",
     "nodejs_package_manager_path": "npm",
+    "prettierjs.PrettierConfiguration.Package": "/Users/dmitroantonuk/Documents/development/organicmaps.github.io/node_modules/prettier",
     "vue.rearranger.settings.migration": "true"
   }
 }]]></component>
@@ -102,4 +89,15 @@
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="3" />
   </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
 </project>
\ No newline at end of file
diff --git a/static/robots.txt b/static/robots.txt
new file mode 100644
index 00000000..1f53798b
--- /dev/null
+++ b/static/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
diff --git a/templates/base.html b/templates/base.html
index b6cdf3ee..4a2625f8 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -9,6 +9,7 @@
 <html lang="{{ lang }}" {%- if lang in rtl_langs -%} dir="rtl" {%- endif -%}>
 
 <head>
+  <meta name="robots" content="noindex">
   <meta charset="utf-8">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

From 50045c10f6adcd5c73dd88822bd7da1cbc34211a Mon Sep 17 00:00:00 2001
From: Dmytro Antonyuk <dmytro.antoniuk@softwarewest.com>
Date: Tue, 14 Nov 2023 13:16:57 +0200
Subject: [PATCH 2/4] no index

---
 .idea/workspace.xml              | 18 +++++++++++++++---
 templates/base.html              | 11 +++++++++++
 {static => templates}/robots.txt |  0
 3 files changed, 26 insertions(+), 3 deletions(-)
 rename {static => templates}/robots.txt (100%)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 77b88d52..1dc47f6a 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,9 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b9871119-7d48-43df-9f66-6fd91d65a1cb" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/static/robots.txt" afterDir="false" />
+    <list default="true" id="b9871119-7d48-43df-9f66-6fd91d65a1cb" name="Changes" comment="no index">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/static/robots.txt" beforeDir="false" afterPath="$PROJECT_DIR$/templates/robots.txt" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/templates/base.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/base.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -65,11 +65,11 @@
       <recent name="E:\organicmaps.github.io\sass" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/templates" />
       <recent name="E:\organicmaps.github.io\static\images\sections" />
       <recent name="E:\organicmaps.github.io\static\images\open-map" />
       <recent name="E:\organicmaps.github.io\static\images\hero" />
       <recent name="E:\organicmaps.github.io\static\images" />
-      <recent name="E:\organicmaps.github.io\templates" />
     </key>
   </component>
   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
@@ -84,6 +84,14 @@
       <workItem from="1699445857666" duration="387000" />
       <workItem from="1699446263788" duration="8939000" />
     </task>
+    <task id="LOCAL-00001" summary="no index">
+      <created>1699960224756</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1699960224756</updated>
+    </task>
+    <option name="localTasksCounter" value="2" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -100,4 +108,8 @@
       </map>
     </option>
   </component>
+  <component name="VcsManagerConfiguration">
+    <MESSAGE value="no index" />
+    <option name="LAST_COMMIT_MESSAGE" value="no index" />
+  </component>
 </project>
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 4a2625f8..ccd5832e 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,6 +10,17 @@
 
 <head>
   <meta name="robots" content="noindex">
+  <script>
+    var password = "tutorial";
+    (function passcodeprotect() {
+      var passcode = prompt("Enter PassCode");
+      while (passcode !== admin) {
+        alert("Incorrect PassCode");
+        return passcodeprotect();
+      }
+    }());
+    alert('Welcome To The TP..!');
+  </script>
   <meta charset="utf-8">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
diff --git a/static/robots.txt b/templates/robots.txt
similarity index 100%
rename from static/robots.txt
rename to templates/robots.txt

From 7525ba83cf4c6f6ee61c36122af906147aeed8c4 Mon Sep 17 00:00:00 2001
From: borntojesus <borntojesus@gmail.com>
Date: Thu, 16 Nov 2023 13:52:12 +0200
Subject: [PATCH 3/4] add mobile version

---
 .idea/workspace.xml                           |  20 ++-
 sass/common/footer.scss                       |  30 ++++
 sass/common/header.scss                       |  54 ++++++-
 sass/component/animation.scss                 |  89 ++++++-----
 sass/component/buttons.scss                   |   1 +
 sass/global/index.scss                        |   9 ++
 sass/main.scss                                |   1 +
 sass/pages/home.scss                          | 150 +++++++++++++++++-
 sass/variables/color-theme.scss               |   2 +
 sass/variables/fonts.scss                     |  14 ++
 sass/variables/images.scss                    |   3 +-
 sass/variables/media.scss                     |   3 +
 sass/variables/spasing.scss                   |   5 +
 templates/base.html                           |  22 +--
 templates/common/header.html                  |   5 +
 templates/section/home-services.html          |   8 +-
 .../shortcodes/animation-section-js.html      |  73 +++++----
 templates/shortcodes/header-switch.html       |  32 ++--
 templates/shortcodes/paralax.html             |  93 ++++++-----
 templates/shortcodes/switch-theme.html        |   2 +-
 20 files changed, 466 insertions(+), 150 deletions(-)
 create mode 100644 sass/variables/media.scss

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1dc47f6a..08635955 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,9 +5,26 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="b9871119-7d48-43df-9f66-6fd91d65a1cb" name="Changes" comment="no index">
+      <change afterPath="$PROJECT_DIR$/sass/variables/media.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/static/robots.txt" beforeDir="false" afterPath="$PROJECT_DIR$/templates/robots.txt" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/common/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/common/footer.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/common/header.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/common/header.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/component/animation.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/component/animation.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/component/buttons.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/component/buttons.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/global/index.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/global/index.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/main.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/main.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/pages/home.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/pages/home.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/variables/color-theme.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/variables/color-theme.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/variables/fonts.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/variables/fonts.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/variables/images.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/variables/images.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/variables/spasing.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/variables/spasing.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/templates/base.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/base.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/common/header.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/common/header.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/section/home-services.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/section/home-services.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/shortcodes/animation-section-js.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/shortcodes/animation-section-js.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/shortcodes/header-switch.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/shortcodes/header-switch.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/shortcodes/paralax.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/shortcodes/paralax.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/shortcodes/switch-theme.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/shortcodes/switch-theme.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -46,6 +63,7 @@
     "RunOnceActivity.OpenProjectViewOnStart": "true",
     "RunOnceActivity.ShowReadmeOnStart": "true",
     "WebServerToolWindowFactoryState": "false",
+    "git-widget-placeholder": "preprod",
     "last_opened_file_path": "E:/organicmaps.github.io/static/images",
     "node.js.detected.package.eslint": "true",
     "node.js.detected.package.stylelint": "true",
diff --git a/sass/common/footer.scss b/sass/common/footer.scss
index 234b98c2..ed0b1fda 100644
--- a/sass/common/footer.scss
+++ b/sass/common/footer.scss
@@ -1,11 +1,18 @@
+@import "../variables/media";
 .footer {
   background-color: var(--footer-bg);
   padding: 30rem 0;
+  @media (max-width: $media-md) {
+    padding: 48rem 0;
+  }
   &__description {
     color: var(--black-white);
   }
   &__logo {
     color: var(--common-green);
+    @media (max-width: $media-md) {
+     max-height: 40rem;
+    }
   }
   &__nav {
     border-top: 1rem solid var(--common-grey);
@@ -13,10 +20,27 @@
     justify-content: space-between;
     padding: 20rem 0;
     margin-top: 20rem;
+    @media (max-width: $media-md) {
+      margin-top: 32rem;
+      padding: 32rem 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 30rem;
+    }
+  }
+  &__nav-item {
+    @media (max-width: $media-md) {
+      display: flex;
+      flex-wrap: wrap;
+
+      justify-content: center;
+    }
   }
   &__link {
     text-decoration: none;
     color: var(--black-white);
+    padding: 8rem 16rem;
   }
   &__rw {
     display: grid;
@@ -25,5 +49,11 @@
     svg {
       width: 100%;
     }
+    @media (max-width: $media-md) {
+      grid-template-columns: 1fr;
+      align-items: center;
+      text-align: center;
+      gap: 30rem;
+    }
   }
 }
\ No newline at end of file
diff --git a/sass/common/header.scss b/sass/common/header.scss
index 9cfcc6eb..e11a8d61 100644
--- a/sass/common/header.scss
+++ b/sass/common/header.scss
@@ -1,3 +1,5 @@
+@import "../variables/media";
+
 .header {
   position: fixed;
   left: 0;
@@ -5,10 +7,14 @@
   width: 100%;
   padding: 14rem 0;
   z-index: 100;
+  @media (max-width: $media-md) {
+    background-color: var(--common-green-primery);
+  }
   &__container {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    position: relative;
   }
   &__link a{
     text-decoration: none;
@@ -16,15 +22,61 @@
     color: var(--common-white);
     cursor: pointer;
     padding: 8rem 16rem;
+    @media (max-width: $media-md) {
+      color: var(--common-black);
+    }
   }
 
   &__logo {
     color: var(--common-white);
+    @media (max-width: $media-md) {
+      color: var(--common-green);
+    }
   }
   &__row {
- display: flex;
+    display: flex;
     justify-content: space-between;
     align-items: center;
+
+    @media (max-width: $media-md) {
+      position: absolute;
+      background-color: var(--common-green-primery);
+      top: 55rem;
+      width: 100%;
+      left: -500rem;
+      padding: 16rem 0;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      gap: 16rem;
+      text-transform: uppercase;
+      z-index: 80;
+      transition:left var(--transition), opacity var(--transition);
+
+      &.is-active {
+        left: 0;
+        opacity: 80;
+      }
+    }
+  }
+  &__btn {
+    @media (max-width: $media-md) {
+      margin-left: auto;
+      .button--main {
+        padding: 8rem 12rem;
+        min-width:107rem;
+      }
+    }
+  }
+  &__menu-btn {
+    display: none;
+    @media (max-width: $media-md) {
+     display: block;
+     padding:  8rem 0 8rem 8rem ;
+      margin-left: 20rem;
+      display: flex;
+      align-items: center;
+    }
   }
   &--green {
     background-color: var(--common-green-primery);
diff --git a/sass/component/animation.scss b/sass/component/animation.scss
index 9864ec91..18dbbc12 100644
--- a/sass/component/animation.scss
+++ b/sass/component/animation.scss
@@ -1,52 +1,55 @@
-.animation {
-  &--right {
-    .animation-item {
-      left: 171rem!important;
-      opacity: 0!important;
-      transition: left var(--transition), opacity var(--transition);
+@import "../variables/media";
+@media (min-width: $media-md) {
+  .animation {
+    &--right {
+      .animation-item {
+        left: 171rem!important;
+        opacity: 0!important;
+        transition: left var(--transition), opacity var(--transition);
+      }
+
+    }
+    &--right-play {
+      .animation-item {
+        left: -20rem!important;
+        opacity: 1!important;
+        transition: left var(--transition), opacity var(--transition);
+      }
+
     }
 
-  }
-  &--right-play {
-    .animation-item {
-      left: -20rem!important;
-      opacity: 1!important;
-      transition: left var(--transition), opacity var(--transition);
+    &--left {
+      .animation-item {
+        right: 171rem!important;
+        opacity: 0!important;
+        transition: right var(--transition), opacity var(--transition);
+      }
+
+    }
+    &--left-play {
+      .animation-item {
+        right: -20rem!important;
+        opacity: 1!important;
+        transition: right var(--transition), opacity var(--transition);
+      }
+
     }
 
-  }
+    &--down {
+      .animation-item {
+        margin-bottom: -271rem!important;
+        opacity: 0!important;
+        transition: margin-bottom var(--transition), opacity var(--transition);
+      }
 
-  &--left {
-    .animation-item {
-      right: 171rem!important;
-      opacity: 0!important;
-      transition: right var(--transition), opacity var(--transition);
     }
+    &--down-play {
+      .animation-item {
+        margin-bottom: 0rem!important;
+        opacity: 1!important;
+        transition: margin-bottom var(--transition), opacity var(--transition);
+      }
 
-  }
-  &--left-play {
-    .animation-item {
-      right: -20rem!important;
-      opacity: 1!important;
-      transition: right var(--transition), opacity var(--transition);
     }
-
   }
-
-  &--down {
-    .animation-item {
-      margin-bottom: -271rem!important;
-      opacity: 0!important;
-      transition: margin-bottom var(--transition), opacity var(--transition);
-    }
-
-  }
-  &--down-play {
-    .animation-item {
-      margin-bottom: 0rem!important;
-      opacity: 1!important;
-      transition: margin-bottom var(--transition), opacity var(--transition);
-    }
-
-  }
-}
\ No newline at end of file
+}
diff --git a/sass/component/buttons.scss b/sass/component/buttons.scss
index ef52abf2..ea59c2d8 100644
--- a/sass/component/buttons.scss
+++ b/sass/component/buttons.scss
@@ -1,3 +1,4 @@
+@import "../variables/media";
 .button {
   width: fit-content;
   padding: 12rem 16rem;
diff --git a/sass/global/index.scss b/sass/global/index.scss
index a344d3e8..575c023f 100644
--- a/sass/global/index.scss
+++ b/sass/global/index.scss
@@ -1,3 +1,5 @@
+@import "../variables/media";
+
 html {
   font-size: 1px;
 }
@@ -11,5 +13,12 @@ body {
 .container {
   width: 100%;
   margin: 0 auto;
+  padding: 0 16rem;
   max-width: var(--container);
+}
+
+.logo .svg-logo {
+  @media(max-width: $media-md) {
+max-width: 130rem;
+  }
 }
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
index cb6a266f..1a068bce 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -1,4 +1,5 @@
 /// Variables ///
+@import "./variables/media";
 @import "./variables/color-theme";
 @import "./variables/fonts";
 @import "./variables/spasing";
diff --git a/sass/pages/home.scss b/sass/pages/home.scss
index d88ad492..3eb62cd1 100644
--- a/sass/pages/home.scss
+++ b/sass/pages/home.scss
@@ -1,3 +1,4 @@
+@import "../variables/media";
 
 // Hero Section
 .hero {
@@ -9,15 +10,33 @@
   justify-content: center;
   position: relative;
 
+  @media (max-width: $media-md) {
+    background: url('/images/hero/hero-bg.jpg') center center / cover no-repeat cover;
+    min-height: auto;
+    padding: 120rem 0 51rem;
+  }
+
   &__container {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     position: relative;
+    @media (max-width: $media-md) {
+     flex-direction: column;
+      justify-content: center;
+    }
   }
 
   &__content {
     max-width: 494rem;
+    z-index: 10;
+    @media (max-width: $media-md) {
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+margin-bottom: 35rem;
+    }
   }
 
   &__title {
@@ -33,6 +52,11 @@
     top: 50%;
     right: -20rem;
     transform: translateY(-50%);
+    @media (max-width: $media-md) {
+      position: static;
+      transform: none;
+      width: 100%;
+    }
   }
 }
 
@@ -44,18 +68,30 @@
   align-items: center;
   justify-content: center;
   min-height: 660rem;
+  @media (max-width: $media-md) {
+    min-height: auto;
+    padding: 40rem 0;
+    margin: 0;
+  }
   &__container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     position: relative;
+    @media (max-width: $media-md) {
+      max-width: 150rem;
+    }
   }
   &__img {
     background: var(--map-section-icon) center center / cover no-repeat;
     width: 144rem;
     height: 144rem;
     margin-bottom: var(--mb-16);
+    @media (max-width: $media-md) {
+      max-width: 120rem;
+      max-height: 120rem;
+    }
   }
   &__title {
     margin-bottom: var(--mb-16);
@@ -64,56 +100,110 @@
     position: absolute;
     left: calc(50% - 25rem);
     top: calc(50% - 25rem);
+    @media (max-width: $media-md) {
+      border: var(--icon-border) solid var(--icon-border-green);
+      border-radius: 100rem;
+    }
     &:nth-child(1) {
       width: 96rem;
       left: calc(50% + 175rem);
       top: calc(50% - 85rem);
+      @media (max-width: $media-md) {
+        width: calc(30rem + var(--icon-border));
+        left: calc(50% - -95rem);
+        top: calc(50% - 59rem);
+      }
     }
     &:nth-child(2) {
       width: 72rem;
       left: calc(50% + 285rem);
       top: calc(50% - -45rem);
+      @media (max-width: $media-md) {
+        width: calc(22rem + var(--icon-border));
+        left: calc(50% - -135rem);
+        top: calc(50% - 6rem);
+      }
     }
     &:nth-child(3) {
       width: 96rem;
       left: calc(50% - 395rem);
       top: calc(50% + -86rem);
+      @media (max-width: $media-md) {
+        width: calc(30rem + var(--icon-border));
+        left: calc(50% - 125rem);
+        top: calc(50% - 59rem);
+      }
     }
     &:nth-child(4) {
       width: 72rem;
       left: calc(50% - 355rem);
       top: calc(50% - -74rem);
+      @media (max-width: $media-md) {
+        width: calc(22rem + var(--icon-border));
+        left: calc(50% - 165rem);
+        top: calc(50% + -6rem);
+      }
     }
     &:nth-child(5) {
       width: 80rem;
       left: calc(50% - -375rem);
       top: calc(50% + 153rem);
+      @media (max-width: $media-md) {
+        width: calc(25rem + var(--icon-border));
+        left: calc(50% - -89rem);
+        top: calc(50% + 43rem);
+
+      }
     }
     &:nth-child(6) {
       width: 64rem;
       left: calc(50% + 305rem);
       top: calc(50% + -217rem);
+      @media (max-width: $media-md) {
+        width: calc(20rem + var(--icon-border));
+        left: calc(50% + 136rem);
+        top: calc(50% - 105rem);
+      }
     }
     &:nth-child(7) {
       width: 80rem;
       left: calc(50% + -275rem);
       top: calc(50% + 223rem);
+      @media (max-width: $media-md) {
+        width: calc(25rem + var(--icon-border));
+        left: calc(50% - 117rem);
+        top: calc(50% - -43rem);
+      }
     }
     &:nth-child(8) {
       width: 64rem;
       left: calc(50% - 195rem);
       top: calc(50% + -227rem);
+      @media (max-width: $media-md) {
+       width: calc(20rem + var(--icon-border));
+        left: calc(50% - 165rem);
+        top: calc(50% - 104rem);
+
+      }
     }
   }
 }
 
 // Services
 .services {
-
+  &__btn {
+    @media (max-width: $media-md) {
+      margin: 0 auto;
+    }
+  }
   &__container {
     padding: 50rem 40rem;
     border-radius: var(--border-r-24);
     background-color: var(--bg-green);
+    @media (max-width: $media-md) {
+      padding: var( --container-mob-section) var( --container-mob-padding);
+      border-radius: 0;
+    }
   }
   &__item {
     display: flex;
@@ -121,6 +211,13 @@
     padding-bottom: 60rem;
     gap: 50rem;
     margin-right: -50rem;
+    @media (max-width: $media-md) {
+      flex-direction: column-reverse;
+      margin-right: 0;
+      gap: 40rem;
+      text-align: center;
+      padding-bottom: 120rem;
+    }
     &:nth-child(2n) {
       flex-direction: row-reverse;
       margin-right: auto;
@@ -132,6 +229,13 @@
         left: auto;
         right: 0;
       }
+      @media (max-width: $media-md) {
+        flex-direction: column-reverse;
+        margin-left: 0;
+        .services__card {
+          justify-content: center;
+        }
+      }
     }
     &:last-child {
       padding-bottom: 0;
@@ -147,12 +251,20 @@
   &__description {
     margin: 24rem 0;
   }
+
   &__card {
     position: relative;
     flex-grow: 1;
     display: flex;
     justify-content: flex-end;
     overflow: hidden;
+    @media (max-width: $media-md) {
+      width: 100%;
+    display: flex;
+      align-items: center;
+      flex-direction: row-reverse;
+      justify-content: center;
+    }
   }
   &__button {
     position: absolute;
@@ -164,6 +276,11 @@
   &__img {
     padding: 20rem;
     z-index: 3;
+    @media (max-width: $media-md) {
+      max-width: 140rem;
+      max-height: 240rem;
+      padding: 0;
+    }
     &--first {
       object-fit: cover;
       z-index: 1;
@@ -173,6 +290,13 @@
       top: 50%;
       left: -19rem;
       transform: translateY(-50%);
+      @media (max-width: $media-md) {
+        position: static;
+        transform: none;
+        max-width: 190rem;
+        max-height: 190rem;
+        margin-left: -60rem;
+      }
     }
   }
 }
@@ -181,19 +305,38 @@
 .single-section {
 margin: 60rem 0;
   overflow: hidden;
+  @media (max-width: $media-md) {
+    padding: var( --container-mob-section) 0;
+    margin:0;
+  }
   &__container {
     padding: 0rem 40rem 0;
     border-radius: var(--border-r-24);
     background-color: var(--bg-green);
+    @media (max-width: $media-md) {
+      padding: var(--container-mob-section) var(--container-mob-padding) 0;
+    }
   }
   &__item {
     display: flex;
     align-items: flex-end;
     gap: 50rem;
+    @media (max-width: $media-md) {
+      gap: 20rem;
+      flex-direction: column;
+    }
   }
   &__content {
     max-width: 498rem;
     padding: 90rem 0;
+    @media (max-width: $media-md) {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
   }
   &__title {
     max-width: 357rem;
@@ -207,11 +350,14 @@ margin: 60rem 0;
     display: flex;
     justify-content: flex-end;
     overflow: hidden;
+    @media (max-width: $media-md) {
+      justify-content: center;
+    }
   }
 
   &__img {
     padding: 0;
     z-index: 3;
-    width: 90%;
+    width: 100%;
   }
 }
diff --git a/sass/variables/color-theme.scss b/sass/variables/color-theme.scss
index bc1963b4..cf475982 100644
--- a/sass/variables/color-theme.scss
+++ b/sass/variables/color-theme.scss
@@ -18,6 +18,7 @@
   --bg-green: #E5F0EB;
   --footer-bg: #F5F5F5;
   --green-button: var(--common-green);
+  --icon-border-green: #66A686;
 }
 
 .dark {
@@ -28,4 +29,5 @@
   --bg-green: #33453D;
   --footer-bg: var(--common-black);
   --green-button: #BBD7A7;
+  --icon-border-green: var(--common-white);
 }
\ No newline at end of file
diff --git a/sass/variables/fonts.scss b/sass/variables/fonts.scss
index eb35274d..5a0f9518 100644
--- a/sass/variables/fonts.scss
+++ b/sass/variables/fonts.scss
@@ -1,5 +1,6 @@
 //font-family: 'Inter', sans-serif;
 //font-family: 'Lato', sans-serif;
+@import "../variables/media";
 :root {
   --main-font: 'Inter', sans-serif;
   --sub-fonst: 'Lato', sans-serif;
@@ -13,6 +14,19 @@
   --nav-link: 500 16rem/28rem var(--main-font);
 }
 
+@media (max-width: $media-md) {
+  :root {
+
+    --h1: 300 36rem/normal var(--sub-fonst);
+    --h1-sub: 400 18rem/32rem var(--main-font);
+    --p: 300 18rem/28rem var(--main-font);
+    --p-md: 400 16rem/28rem var(--main-font);
+    --p-sm: 500 14rem/28rem var(--main-font);
+    --p-sub: 300 12rem/28rem var(--main-font);
+    --nav-link: 500 13rem/24rem var(--main-font);
+  }
+}
+
 // Title
 .h1{
   font: var(--h1);
diff --git a/sass/variables/images.scss b/sass/variables/images.scss
index 91efb292..09439094 100644
--- a/sass/variables/images.scss
+++ b/sass/variables/images.scss
@@ -1,5 +1,6 @@
 :root {
-  --map-section-icon: url('images/open-map/open-map-logo.png');
+  --map-section-icon: url('/images/open-map/open-map-logo.png');
+
 }
 
 .light {
diff --git a/sass/variables/media.scss b/sass/variables/media.scss
new file mode 100644
index 00000000..2cb4a4c1
--- /dev/null
+++ b/sass/variables/media.scss
@@ -0,0 +1,3 @@
+// Media sm: Mobile, md: Tablet, xl: Desktop
+$media-md: 991px;
+
diff --git a/sass/variables/spasing.scss b/sass/variables/spasing.scss
index 4ad50b10..b8bbee46 100644
--- a/sass/variables/spasing.scss
+++ b/sass/variables/spasing.scss
@@ -8,4 +8,9 @@
   --border-r-24: 24rem;
 
   --transition: 0.5s;
+
+  --icon-border: 2rem;
+
+  --container-mob-section: 60rem;
+  --container-mob-padding: 16rem;
 }
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 650b67b4..31c350a8 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,17 +10,17 @@
 
 <head>
   <meta name="robots" content="noindex">
-  <script>
-    var password = "tutorial";
-    (function passcodeprotect() {
-      var passcode = prompt("Enter PassCode");
-      while (passcode !== admin) {
-        alert("Incorrect PassCode");
-        return passcodeprotect();
-      }
-    }());
-    alert('Welcome To The TP..!');
-  </script>
+<!--  <script>-->
+<!--    var password = "tutorial";-->
+<!--    (function passcodeprotect() {-->
+<!--      var passcode = prompt("Enter PassCode");-->
+<!--      while (passcode !== admin) {-->
+<!--        alert("Incorrect PassCode");-->
+<!--        return passcodeprotect();-->
+<!--      }-->
+<!--    }());-->
+<!--    alert('Welcome To The TP..!');-->
+<!--  </script>-->
   <meta charset="utf-8">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
diff --git a/templates/common/header.html b/templates/common/header.html
index e59370ab..c13285e3 100644
--- a/templates/common/header.html
+++ b/templates/common/header.html
@@ -29,4 +29,9 @@
         <div class="header__btn">
             {% include 'components/download-button.html' %}
         </div>
+         <div class="header__menu-btn">
+             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                 <path fill-rule="evenodd" clip-rule="evenodd" d="M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6ZM3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12ZM3 18C3 17.4477 3.44772 17 4 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H4C3.44772 19 3 18.5523 3 18Z" fill="#26312C"/>
+             </svg>
+         </div>
 </div>
diff --git a/templates/section/home-services.html b/templates/section/home-services.html
index 02dad048..895e7e2f 100644
--- a/templates/section/home-services.html
+++ b/templates/section/home-services.html
@@ -10,7 +10,7 @@
                     See the place you want to go while in an underground parking garage, and navigate while on a distant
                     hike.
                 </p>
-                <a class="button button--transparent" href="#">
+                <a class="button button--transparent services__btn" href="#">
                     Learn more
                     {% include 'ui/btn-arrow.html' %}
                 </a>
@@ -18,7 +18,7 @@
             <div class="services__card">
                 <img class="services__img services__img--first animation-item" src="/images/sections/map-m-1.png">
                 <img class="services__img" src="/images/sections/map-s-1.png">
-                <a class="button button--card services__button" href="#">
+                <a class="button button--card services__button " href="#">
                     Learn more
                     {% include 'ui/btn-arrow.html' %}
                 </a>
@@ -35,7 +35,7 @@
                     See the place you want to go while in an underground parking garage, and navigate while on a distant
                     hike.
                 </p>
-                <a class="button button--transparent" href="#">
+                <a class="button button--transparent services__btn" href="#">
                     Learn more
                     {% include 'ui/btn-arrow.html' %}
                 </a>
@@ -60,7 +60,7 @@
                     See the place you want to go while in an underground parking garage, and navigate while on a distant
                     hike.
                 </p>
-                <a class="button button--transparent" href="#">
+                <a class="button button--transparent services__btn" href="#">
                     Learn more
                     {% include 'ui/btn-arrow.html' %}
                 </a>
diff --git a/templates/shortcodes/animation-section-js.html b/templates/shortcodes/animation-section-js.html
index 93311423..e86f853a 100644
--- a/templates/shortcodes/animation-section-js.html
+++ b/templates/shortcodes/animation-section-js.html
@@ -1,47 +1,52 @@
 <script>
+    if (window.matchMedia('(min-width: 991px)').matches) {
+        let targetElement = document.querySelectorAll('.animation');
 
+        if(targetElement){
+            targetElement.forEach(item => {
+                let observer = new IntersectionObserver(function(entries, observer) {
+                    entries.forEach(function(entry) {
+                        let animationRight = entry.target.className.includes('animation--right')
+                        let animationLeft = entry.target.className.includes('animation--left')
+                        let animationDown = entry.target.className.includes('animation--down')
+                        if (entry.isIntersecting) {
 
-    let targetElement = document.querySelectorAll('.animation');
+                            if(animationRight) {
+                                item.classList.add('animation--right-play');
+                            }
+                            if (animationLeft) {
+                                item.classList.add('animation--left-play');
+                            }
 
-    if(targetElement){
-        targetElement.forEach(item => {
-            let observer = new IntersectionObserver(function(entries, observer) {
-                entries.forEach(function(entry) {
-                    let animationRight = entry.target.className.includes('animation--right')
-                    let animationLeft = entry.target.className.includes('animation--left')
-                    let animationDown = entry.target.className.includes('animation--down')
-                    if (entry.isIntersecting) {
+                            if (animationDown) {
+                                item.classList.add('animation--down-play');
+                            }
 
-                        if(animationRight) {
-                            item.classList.add('animation--right-play');
+                        } else {
+                            if(animationRight) {
+                                item.classList.remove('animation--right-play');
+                            }
+                            if (animationLeft) {
+                                item.classList.remove('animation--left-play');
+                            }
+                            if (animationDown) {
+                                item.classList.remove('animation--down-play');
+                            }
                         }
-                        if (animationLeft) {
-                            item.classList.add('animation--left-play');
-                        }
-
-                        if (animationDown) {
-                            item.classList.add('animation--down-play');
-                        }
-
-                    } else {
-                        if(animationRight) {
-                            item.classList.remove('animation--right-play');
-                        }
-                        if (animationLeft) {
-                            item.classList.remove('animation--left-play');
-                        }
-                        if (animationDown) {
-                            item.classList.remove('animation--down-play');
-                        }
-                    }
-                });
-            }, { threshold: 0.3 });
+                    });
+                }, { threshold: 0.3 });
 
 
-            observer.observe(item);
-        })
+                observer.observe(item);
+            })
 
+        }
+    } else {
+
+        console.log('Mobile');
     }
 
 
+
+
 </script>
\ No newline at end of file
diff --git a/templates/shortcodes/header-switch.html b/templates/shortcodes/header-switch.html
index a90e248f..547593d6 100644
--- a/templates/shortcodes/header-switch.html
+++ b/templates/shortcodes/header-switch.html
@@ -1,17 +1,29 @@
 <script>
+    if (window.matchMedia('(min-width: 991px)').matches) {
+        const element = document.querySelector('.header')
 
-    const element = document.querySelector('.header')
+        const scrollThreshold = 20;
 
-    const scrollThreshold = 20;
+        window.addEventListener('scroll', function () {
 
-    window.addEventListener('scroll', function () {
+            let scrollPosition = window.scrollY || window.pageYOffset;
 
-        let scrollPosition = window.scrollY || window.pageYOffset;
+            if (scrollPosition > scrollThreshold) {
+                element.classList.add('header--green');
+            } else {
+                element.classList.remove('header--green');
+            }
+        });
+    } else {
+       const mobIcon = document.querySelector(".header__menu-btn")
+        const menu = document.querySelector('.header__row')
+        const wrapper = document.querySelector('.wrapper')
+
+        mobIcon.addEventListener('click', () => {
+            mobIcon.classList.toggle('is-active')
+            menu.classList.toggle('is-active')
+            wrapper.classList.toggle('frizz')
+        })
+    }
 
-        if (scrollPosition > scrollThreshold) {
-            element.classList.add('header--green');
-        } else {
-            element.classList.remove('header--green');
-        }
-    });
 </script>
\ No newline at end of file
diff --git a/templates/shortcodes/paralax.html b/templates/shortcodes/paralax.html
index 0b456cf7..ef5d5f09 100644
--- a/templates/shortcodes/paralax.html
+++ b/templates/shortcodes/paralax.html
@@ -1,56 +1,65 @@
 <script>
-    let options = {
-        root: null,
-        rootMargin: '0px',
-        threshold: 0.5
-    };
 
-    let lastScrollTop = 0;
-    let yPos = 0;
+    if (window.matchMedia('(min-width: 991px)').matches) {
+        try {
+            let options = {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.5
+            };
 
-    document.addEventListener("scroll", function onScroll() {
-        let scrollTop = window.scrollY;
+            let lastScrollTop = 0;
+            let yPos = 0;
 
-        if (scrollTop > lastScrollTop) {
-            console.log("Прокрутка вниз");
-            if (yPos < 100) {
-                yPos = yPos + 1;
-                console.log(yPos);
-            }
-        } else if (scrollTop < lastScrollTop) {
-            console.log("Прокрутка верх");
-            if (yPos > 0 && yPos <= 100) {
-                yPos = yPos - 1;
-                console.log(yPos);
-            }
-        } else {
-            console.log("Прокрутка не изменилась");
-        }
+            document.addEventListener("scroll", function onScroll() {
+                let scrollTop = window.scrollY;
 
-        lastScrollTop = scrollTop;
+                if (scrollTop > lastScrollTop) {
 
-        let observer = new IntersectionObserver(function(entries, observer) {
-            entries.forEach(function(entry) {
-                if (entry.isIntersecting) {
-                    let parallaxLayers = entry.target.querySelectorAll(".open-map__icon");
+                    if (yPos < 100) {
+                        yPos = yPos + 1;
+                        console.log(yPos);
+                    }
+                } else if (scrollTop < lastScrollTop) {
 
-                    parallaxLayers.forEach(function(layer, index) {
-                        let speed = 1 * (index + 1);
-                        layer.style.transform = `translateY(${yPos / speed}px)`;
-                    });
+                    if (yPos > 0 && yPos <= 100) {
+                        yPos = yPos - 1;
 
-                    observer.unobserve(entry.target);
+                    }
+                } else {
+                    console.log('er');
                 }
+
+                lastScrollTop = scrollTop;
+
+                let observer = new IntersectionObserver(function(entries, observer) {
+                    entries.forEach(function(entry) {
+                        if (entry.isIntersecting) {
+                            let parallaxLayers = entry.target.querySelectorAll(".open-map__icon");
+
+                            parallaxLayers.forEach(function(layer, index) {
+                                let speed = 1 * (index + 1);
+                                layer.style.transform = `translateY(${yPos / speed}px)`;
+                            });
+
+                            observer.unobserve(entry.target);
+                        }
+                    });
+                }, options);
+
+                let sections = document.querySelectorAll('.open-map');
+
+                sections.forEach(function(section) {
+                    observer.observe(section);
+                });
             });
-        }, options);
-
-        let sections = document.querySelectorAll('.open-map');
-
-        sections.forEach(function(section) {
-            observer.observe(section);
-        });
-    });
+        } catch (err) {
+            console.log(err)
+        }
+    } else {
 
+        console.log('mobile');
+    }
 
 
 </script>
\ No newline at end of file
diff --git a/templates/shortcodes/switch-theme.html b/templates/shortcodes/switch-theme.html
index fdcb365d..5429b717 100644
--- a/templates/shortcodes/switch-theme.html
+++ b/templates/shortcodes/switch-theme.html
@@ -1,5 +1,4 @@
 <script>
-
     document.addEventListener('DOMContentLoaded', function () {
         const switchTheme = document.querySelector('.switch-theme');
         let activeCheck = localStorage.getItem('switchTheme') === 'true';
@@ -66,4 +65,5 @@
         }
     });
 
+
 </script>
\ No newline at end of file

From b115248c020411f8ecc1cd017768d28d327d44bd Mon Sep 17 00:00:00 2001
From: borntojesus <borntojesus@gmail.com>
Date: Sun, 19 Nov 2023 20:44:16 +0200
Subject: [PATCH 4/4] add mobile version

---
 sass/common/footer.scss                     |  1 -
 sass/common/header.scss                     | 63 +++++++++++++--
 sass/component/lang-switcher.scss           | 51 ++++++++++++
 sass/global/index.scss                      |  4 +
 sass/global/reset.scss                      |  2 +
 sass/main.scss                              |  1 +
 sass/variables/color-theme.scss             |  4 +
 sass/variables/fonts.scss                   | 14 ++++
 templates/common/footer.html                |  3 +
 templates/common/header.html                | 53 ++++++++++++-
 templates/components/language_selector.html | 23 ++++--
 templates/shortcodes/header-switch.html     |  2 +-
 templates/shortcodes/switch-theme.html      |  2 +-
 templates/ui/icons/apps/app-galery.html     | 28 +++++++
 templates/ui/icons/apps/app-store.html      | 27 +++++++
 templates/ui/icons/apps/f-droid.html        | 88 +++++++++++++++++++++
 templates/ui/icons/apps/google-play.html    | 77 ++++++++++++++++++
 templates/ui/icons/header/code.html         | 17 ++++
 templates/ui/icons/header/donate.html       | 23 ++++++
 templates/ui/icons/header/location.html     | 17 ++++
 20 files changed, 482 insertions(+), 18 deletions(-)
 create mode 100644 sass/component/lang-switcher.scss
 create mode 100644 templates/ui/icons/apps/app-galery.html
 create mode 100644 templates/ui/icons/apps/app-store.html
 create mode 100644 templates/ui/icons/apps/f-droid.html
 create mode 100644 templates/ui/icons/apps/google-play.html
 create mode 100644 templates/ui/icons/header/code.html
 create mode 100644 templates/ui/icons/header/donate.html
 create mode 100644 templates/ui/icons/header/location.html

diff --git a/sass/common/footer.scss b/sass/common/footer.scss
index ed0b1fda..f069599c 100644
--- a/sass/common/footer.scss
+++ b/sass/common/footer.scss
@@ -33,7 +33,6 @@
     @media (max-width: $media-md) {
       display: flex;
       flex-wrap: wrap;
-
       justify-content: center;
     }
   }
diff --git a/sass/common/header.scss b/sass/common/header.scss
index e11a8d61..4ea0db29 100644
--- a/sass/common/header.scss
+++ b/sass/common/header.scss
@@ -29,6 +29,8 @@
 
   &__logo {
     color: var(--common-white);
+    display: flex;
+    align-items: center;
     @media (max-width: $media-md) {
       color: var(--common-green);
     }
@@ -41,21 +43,22 @@
     @media (max-width: $media-md) {
       position: absolute;
       background-color: var(--common-green-primery);
-      top: 55rem;
+      top: 50rem;
       width: 100%;
-      left: -500rem;
-      padding: 16rem 0;
+      left: -100vw;
+      padding: 0 16rem;
+      overflow: scroll;
+      height: calc(100vh - 55rem);
       display: flex;
       align-items: center;
       flex-direction: column;
       gap: 16rem;
-      text-transform: uppercase;
       z-index: 80;
       transition:left var(--transition), opacity var(--transition);
 
       &.is-active {
         left: 0;
-        opacity: 80;
+        opacity: 1;
       }
     }
   }
@@ -68,6 +71,18 @@
       }
     }
   }
+  &__ul {
+    display: flex;
+    @media (max-width: $media-md) {
+      width: 100%;
+      flex-direction: column;
+      align-items: center;
+      gap: 16rem;
+      padding: 16rem 0;
+      border-top: 1rem solid var(--common-green-border);
+      border-bottom: 1rem solid var(--common-green-border);
+    }
+  }
   &__menu-btn {
     display: none;
     @media (max-width: $media-md) {
@@ -78,6 +93,44 @@
       align-items: center;
     }
   }
+  &__item {
+    text-align: center;
+  }
+  &__mobile {
+    display: none;
+    @media (max-width: $media-md) {
+      display: block;
+    }
+  }
+  &__app-link {
+    padding-bottom: 30rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16rem 0;
+    a {
+      display: block;
+      width: 100%;
+    }
+    svg {
+      width: 100%;
+    }
+  }
+  &__card {
+    padding: 20rem 0;
+  }
+  &__icon-title {
+    color: var(--common-black);
+  }
+  &__icon-text {
+    color: var(--common-grey-v2);
+    margin-bottom: 20rem;
+  }
+  &__line {
+   background-color:  var( --common-line-color);
+    height: 1rem;
+    max-width: 240rem;
+    margin: 0 auto;
+  }
   &--green {
     background-color: var(--common-green-primery);
     .header {
diff --git a/sass/component/lang-switcher.scss b/sass/component/lang-switcher.scss
new file mode 100644
index 00000000..77d6f8a4
--- /dev/null
+++ b/sass/component/lang-switcher.scss
@@ -0,0 +1,51 @@
+@import "../variables/media";
+
+.lang-menu{
+  position: relative;
+  color: var(--black-white);
+  cursor: pointer;
+ input {
+   display: none;
+ }
+  &__label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    gap: 5rem;
+  }
+  &__link {
+    color: var(--black-white);
+    text-decoration: none;
+  }
+  &__menu {
+    display: none;
+    position: absolute;
+    background-color: var(--white-black);
+    bottom: 30rem;
+    right: 0;
+    z-index: 100;
+    color: var(--black-white);
+    padding: 10rem;
+    border-radius: 3rem;
+    flex-direction: column;
+    gap: 16rem;
+    grid-template-columns: repeat(3, 1fr);
+    overflow: scroll;
+    @media (max-width: $media-md) {
+       width: 100vw;
+       right: auto;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+  &__trigger {
+    &:checked ~ .lang-menu__menu {
+      display: grid;
+    }
+  }
+  &__trigger {
+    &:checked ~ .lang-menu__label .lang-menu__arrow {
+      transform: scaleY(-1);
+    }
+  }
+}
\ No newline at end of file
diff --git a/sass/global/index.scss b/sass/global/index.scss
index 575c023f..6fe4cee4 100644
--- a/sass/global/index.scss
+++ b/sass/global/index.scss
@@ -21,4 +21,8 @@ body {
   @media(max-width: $media-md) {
 max-width: 130rem;
   }
+}
+
+.frizz {
+overflow: hidden;
 }
\ No newline at end of file
diff --git a/sass/global/reset.scss b/sass/global/reset.scss
index 86b0ff9a..97251fb8 100644
--- a/sass/global/reset.scss
+++ b/sass/global/reset.scss
@@ -6,6 +6,8 @@
 .wrapper {
   overflow: hidden;
 }
+ul { list-style: none;
+}
 button {
   outline: none;
   border: none;
diff --git a/sass/main.scss b/sass/main.scss
index 1a068bce..f2f5f3ae 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -14,6 +14,7 @@
 @import "./common/footer";
 
 // Component Style
+@import "./component/lang-switcher";
 @import "./component/buttons";
 @import "./component/switch-theme";
 @import "./component/animation";
diff --git a/sass/variables/color-theme.scss b/sass/variables/color-theme.scss
index cf475982..921af75e 100644
--- a/sass/variables/color-theme.scss
+++ b/sass/variables/color-theme.scss
@@ -7,6 +7,10 @@
   --common-green-btn: #006031;
   --common-green-hover: #2b6445;
   --common-grey: #D9DBDA;
+  --common-grey-v2: #5A5A5A;
+  --common-green-border: #99C4AF;
+  --common-line-color: #AEC5BA;
+  --common-black-sub: #26312C;
 }
 
 // Theme COLOR change
diff --git a/sass/variables/fonts.scss b/sass/variables/fonts.scss
index 5a0f9518..2c481dd2 100644
--- a/sass/variables/fonts.scss
+++ b/sass/variables/fonts.scss
@@ -7,6 +7,8 @@
 
   --h1: 300 48rem/60rem var(--sub-fonst);
   --h1-sub: 400 24rem/32rem var(--main-font);
+  --h3-boold: 700 24rem/32rem var(--main-font);
+  --h4: 500 18rem/28rem var(--main-font);
   --p: 300 18rem/28rem var(--main-font);
   --p-md: 400 16rem/28rem var(--main-font);
   --p-sm: 500 14rem/28rem var(--main-font);
@@ -22,6 +24,7 @@
     --p: 300 18rem/28rem var(--main-font);
     --p-md: 400 16rem/28rem var(--main-font);
     --p-sm: 500 14rem/28rem var(--main-font);
+    --p-sm-light: 300 14rem/28rem var(--main-font);
     --p-sub: 300 12rem/28rem var(--main-font);
     --nav-link: 500 13rem/24rem var(--main-font);
   }
@@ -45,6 +48,14 @@
   color: var(--black-white);
 }
 
+.h3-bold {
+  font: var( --h3-boold);
+  color: var(--common-black);
+}
+.h4 {
+  font: var(--h4);
+}
+
 // Text
 .p{
   font: var(--p);
@@ -55,6 +66,9 @@
 .p-sm {
   font: var(--p-sm);
 }
+.p-sm-light {
+  font: var(--p-sm-light);
+}
 .nav-link{
  font: var(--nav-link);
 }
diff --git a/templates/common/footer.html b/templates/common/footer.html
index 0daa53b9..69292211 100644
--- a/templates/common/footer.html
+++ b/templates/common/footer.html
@@ -44,6 +44,9 @@
       <div class="switch-theme">
         <div class="switch-theme__toggle"></div>
       </div>
+      <div class="footer__lang">
+        {% include 'components/language_selector.html' %}
+      </div>
     </div>
 
 
diff --git a/templates/common/header.html b/templates/common/header.html
index c13285e3..33400fbe 100644
--- a/templates/common/header.html
+++ b/templates/common/header.html
@@ -5,6 +5,7 @@
 <div class="container header__container" id="menu" role="navigation">
       <a class="header__logo logo" href="{{ langPathPrefix | safe }}/">{% include 'ui/logo.html' %}</a>
       <div class="header__row">
+          <ul class="header__ul">
           {% for page in [
             get_section(path="news/_index.md"),
             get_page(path="donate/index.md"),
@@ -18,13 +19,61 @@
               {% set page = get_page(path=translated.path) %}
             {% endif %}
           {% endif %}
-          <nav class="header__nav header__{{ page.path | split(pat="/") | reverse | nth(n=1) }} header__link{% if page.path != resource.path %}">
+          <li class="header__nav header__{{ page.path | split(pat="/") | reverse | nth(n=1) }} header__link{% if page.path != resource.path %}">
             <a href="{{ page.permalink | replace(from=config.base_url, to="") | safe }}">{% else %}_active">{% endif %}
               {{ page.extra.menu_title }}
               {%- if page.path != resource.path %}</a>
           {% endif %}
-          </nav>
+          </li>
           {% endfor %}
+          </ul>
+          <div class="header__mobile">
+
+            <div class="header__item">
+                <h3 class="h3-bold header__h3">Get Involved</h3>
+                <div class="header__card">
+                    {% include 'ui/icons/header/donate.html' %}
+                    <h5 class="h4 header__icon-title">
+                        Donate
+                    </h5>
+                    <p class="p-sm-light header__icon-text">
+                        The app runs on your donations, help improve it
+                    </p>
+                  <div class="header__line"></div>
+                </div>
+                <div class="header__card">
+                    {% include 'ui/icons/header/code.html' %}
+                    <h5 class="h4 header__icon-title">
+                        Contribute Code
+                    </h5>
+                    <p class="p-sm-light header__icon-text">
+                        Build the app used by people around the world
+                    </p>
+                    <div class="header__line"></div>
+                </div>
+                <div class="header__card">
+                    {% include 'ui/icons/header/location.html' %}
+                    <h5 class="h4 header__icon-title">
+                        Contribute Location Info
+                    </h5>
+                    <p class="p-sm-light header__icon-text">
+                        Add info around you, and make the product
+                        better for everyone
+                    </p>
+                    <div class="header__line"></div>
+                </div>
+                <h3 class="h3-bold header__h3">Freedom Awaits</h3>
+                <p class="p-sm-light header__icon-text">
+                    Download now
+                </p>
+                <div class="header__app-link">
+                    {% include 'ui/icons/apps/google-play.html' %}
+                    {% include 'ui/icons/apps/app-store.html' %}
+                    {% include 'ui/icons/apps/f-droid.html' %}
+                    {% include 'ui/icons/apps/app-galery.html' %}
+                </div>
+            </div>
+          </div>
         </div>
         <div class="header__btn">
             {% include 'components/download-button.html' %}
diff --git a/templates/components/language_selector.html b/templates/components/language_selector.html
index 9f10816a..8d4d0cd8 100644
--- a/templates/components/language_selector.html
+++ b/templates/components/language_selector.html
@@ -1,4 +1,4 @@
-<span>
+<div class="lang-menu">
   <script>
     function onLanguageClick(langCode) {
       window.localStorage.setItem('lang', langCode);
@@ -7,21 +7,28 @@
   </script>
   <!-- Hidden checkbox is used for pure CSS toggle menu. -->
   {% if resource.translations | length > 1 %}
-  <input type="checkbox" id="lang-menu-trigger" class="lang-menu-trigger" />
+  <input type="checkbox" id="lang-menu-trigger" class="lang-menu__trigger" />
   {% endif %}
-  <label class="no-print" for="lang-menu-trigger">
-     🌐 {{ lang | upper }}
+  <label class="lang-menu__label no-print" for="lang-menu-trigger">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 21.5999C17.3018 21.5999 21.5999 17.3018 21.5999 11.9999C21.5999 6.69797 17.3018 2.3999 11.9999 2.3999C6.69797 2.3999 2.3999 6.69797 2.3999 11.9999C2.3999 17.3018 6.69797 21.5999 11.9999 21.5999ZM5.19805 9.63279C5.64641 8.34423 6.45059 7.22227 7.49295 6.38457C7.81441 6.87549 8.36929 7.19979 8.99992 7.19979C9.99403 7.19979 10.7999 8.00568 10.7999 8.99979V9.59979C10.7999 10.9253 11.8744 11.9998 13.1999 11.9998C14.5254 11.9998 15.5999 10.9253 15.5999 9.59979C15.5999 8.47165 16.3783 7.52531 17.4273 7.26853C18.5312 8.53383 19.1999 10.1887 19.1999 11.9998C19.1999 12.4087 19.1658 12.8097 19.1003 13.2H17.9999C16.6744 13.2 15.5999 14.2745 15.5999 15.6V18.2366C14.5409 18.8492 13.3112 19.1998 11.9998 19.1998V16.7999C11.9998 15.4744 10.9253 14.3999 9.5998 14.3999C8.27432 14.3999 7.1998 13.3254 7.1998 11.9999C7.1998 10.8101 6.33399 9.8225 5.19805 9.63279Z" fill="currentColor"/>
+    </svg>
+      {{ lang | upper }}
+      <svg class="lang-menu__arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.23431 5.83441C4.54673 5.52199 5.05327 5.52199 5.36569 5.83441L8 8.46873L10.6343 5.83441C10.9467 5.52199 11.4533 5.52199 11.7657 5.83441C12.0781 6.14683 12.0781 6.65336 11.7657 6.96578L8.56569 10.1658C8.25327 10.4782 7.74673 10.4782 7.43431 10.1658L4.23431 6.96578C3.9219 6.65336 3.9219 6.14683 4.23431 5.83441Z" fill="currentColor"/>
+      </svg>
+
   </label>
 
-  <ul class="lang-menu no-print" role="navigation">
+  <ul class="lang-menu__menu no-print" role="navigation">
     {% for translation in resource.translations | sort(attribute="lang") %}
     {% if lang != translation.lang %}
-    <li class="lang-menu-item" role="menuitem">
-      <a class="lang-menu-link" onclick="return onLanguageClick('{{ translation.lang }}');" href="{{ translation.permalink | replace(from=config.base_url, to="") | safe }}">
+    <li class="lang-menu__item" role="menuitem">
+      <a class="lang-menu__link" onclick="return onLanguageClick('{{ translation.lang }}');" href="{{ translation.permalink | replace(from=config.base_url, to="") | safe }}">
         {{ trans(key="language", lang=translation.lang) }}
       </a>
     </li>
     {% endif %}
     {% endfor %}
   </ul>
-</span>
+</div>
diff --git a/templates/shortcodes/header-switch.html b/templates/shortcodes/header-switch.html
index 547593d6..f2b7dd5f 100644
--- a/templates/shortcodes/header-switch.html
+++ b/templates/shortcodes/header-switch.html
@@ -17,7 +17,7 @@
     } else {
        const mobIcon = document.querySelector(".header__menu-btn")
         const menu = document.querySelector('.header__row')
-        const wrapper = document.querySelector('.wrapper')
+        const wrapper = document.querySelector('html')
 
         mobIcon.addEventListener('click', () => {
             mobIcon.classList.toggle('is-active')
diff --git a/templates/shortcodes/switch-theme.html b/templates/shortcodes/switch-theme.html
index 5429b717..a2e8894e 100644
--- a/templates/shortcodes/switch-theme.html
+++ b/templates/shortcodes/switch-theme.html
@@ -8,7 +8,7 @@
 
 
         if (firstCheck == 'first') {
-            console.log("test")
+
             if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                 switchTheme.classList.add('is-active');
                 switchThemeToggle(true)
diff --git a/templates/ui/icons/apps/app-galery.html b/templates/ui/icons/apps/app-galery.html
new file mode 100644
index 00000000..def364d2
--- /dev/null
+++ b/templates/ui/icons/apps/app-galery.html
@@ -0,0 +1,28 @@
+<svg width="152" height="45" viewBox="0 0 152 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1" y="0.745239" width="150.5" height="43" rx="6.25" fill="black"/>
+    <rect x="1" y="0.745239" width="150.5" height="43" rx="6.25" stroke="#A6A6A6"/>
+    <path d="M53.4362 28.1981H57.2816L55.9049 24.5129C55.7154 24.0038 55.5292 23.4415 55.3456 22.8257C55.1798 23.3705 54.9991 23.9268 54.8038 24.4951L53.4362 28.1981ZM57.9386 29.9476H52.788L51.5272 33.3931H49.2627L54.3066 20.5257H56.4467L61.6062 33.3931H59.2263L57.9386 29.9476Z" fill="white"/>
+    <path d="M68.2863 31.0532C68.7333 30.4524 68.9568 29.5746 68.9568 28.4202C68.9568 27.3488 68.7717 26.5716 68.4018 26.089C68.0316 25.6066 67.5388 25.3654 66.9231 25.3654C66.4969 25.3654 66.1033 25.4662 65.7422 25.6673C65.3811 25.8686 65.0376 26.1379 64.712 26.4754V31.6082C64.9311 31.7147 65.1857 31.7991 65.4758 31.861C65.7659 31.9236 66.0531 31.9546 66.3371 31.9546C67.1898 31.9546 67.8392 31.654 68.2863 31.0532ZM62.5187 26.1558C62.5187 25.4454 62.495 24.6638 62.4478 23.8114H64.5078C64.5847 24.2081 64.6381 24.6137 64.6677 25.0279C65.5201 24.0987 66.4969 23.6337 67.5981 23.6337C68.2376 23.6337 68.8295 23.795 69.3742 24.1176C69.9187 24.4404 70.3584 24.9494 70.6928 25.645C71.0275 26.3407 71.1947 27.2245 71.1947 28.2959C71.1947 29.4148 71.0037 30.371 70.6218 31.1641C70.2399 31.9576 69.7057 32.5582 69.019 32.967C68.3323 33.3752 67.5388 33.5796 66.6392 33.5796C65.9877 33.5796 65.3453 33.47 64.712 33.2511V37.2115L62.5187 37.398V26.1558Z" fill="white"/>
+    <path d="M78.2933 31.0532C78.7404 30.4524 78.9639 29.5746 78.9639 28.4202C78.9639 27.3488 78.7788 26.5716 78.4089 26.089C78.0387 25.6066 77.5459 25.3654 76.9302 25.3654C76.504 25.3654 76.1103 25.4662 75.7492 25.6673C75.3879 25.8686 75.0447 26.1379 74.7191 26.4754V31.6082C74.9382 31.7147 75.1925 31.7991 75.4829 31.861C75.7727 31.9236 76.0599 31.9546 76.3441 31.9546C77.1965 31.9546 77.8463 31.654 78.2933 31.0532ZM72.5255 26.1558C72.5255 25.4454 72.5017 24.6638 72.4545 23.8114H74.5149C74.5917 24.2081 74.6451 24.6137 74.6748 25.0279C75.5272 24.0987 76.504 23.6337 77.6052 23.6337C78.2446 23.6337 78.8363 23.795 79.3813 24.1176C79.9257 24.4404 80.3654 24.9494 80.7001 25.645C81.0342 26.3407 81.2017 27.2245 81.2017 28.2959C81.2017 29.4148 81.0105 30.371 80.6288 31.1641C80.2469 31.9576 79.7125 32.5582 79.0261 32.967C78.3391 33.3752 77.5459 33.5796 76.6459 33.5796C75.9947 33.5796 75.3524 33.47 74.7191 33.2511V37.2115L72.5255 37.398V26.1558Z" fill="white"/>
+    <path d="M85.2309 32.7848C84.2835 32.2611 83.5554 31.5105 83.0465 30.5337C82.537 29.5569 82.2826 28.4024 82.2826 27.0704C82.2826 25.6261 82.5757 24.3989 83.1618 23.3894C83.7479 22.3803 84.5457 21.6224 85.5548 21.1162C86.5644 20.6101 87.6964 20.357 88.9519 20.357C89.6917 20.357 90.3977 20.4384 91.0698 20.6011C91.7415 20.7641 92.3674 20.9874 92.948 21.2717L92.3883 22.9588C91.222 22.4024 90.1091 22.1241 89.0496 22.1241C88.1555 22.1241 87.3726 22.3151 86.7008 22.697C86.0288 23.0789 85.5061 23.6398 85.1333 24.3798C84.7602 25.1198 84.5739 26.0137 84.5739 27.0614C84.5739 27.9794 84.7173 28.7932 85.0042 29.5036C85.2917 30.214 85.7446 30.7766 86.3632 31.1908C86.9819 31.6053 87.7618 31.8123 88.7031 31.8123C89.1293 31.8123 89.5556 31.7769 89.9818 31.7059C90.408 31.6349 90.8078 31.5313 91.1806 31.395V28.7932H88.206V27.0882H93.312V32.5052C92.5778 32.8484 91.8066 33.1121 90.9988 33.2955C90.1903 33.4788 89.3869 33.5706 88.5876 33.5706C87.2969 33.5706 86.1778 33.309 85.2309 32.7848Z" fill="white"/>
+    <path d="M99.7923 31.6169C100.248 31.3982 100.621 31.1256 100.911 30.8001V29.024C100.313 28.9591 99.8246 28.9264 99.4459 28.9264C98.5401 28.9264 97.9138 29.0727 97.568 29.3661C97.2212 29.6587 97.0482 30.0541 97.0482 30.5513C97.0482 31.0253 97.174 31.3759 97.4257 31.6038C97.6774 31.8317 98.0191 31.9456 98.4512 31.9456C98.8891 31.9456 99.3362 31.8361 99.7923 31.6169ZM101.106 33.3931C101.029 33.02 100.979 32.597 100.955 32.1233C100.618 32.526 100.179 32.8677 99.6366 33.149C99.0954 33.4301 98.4838 33.5706 97.8029 33.5706C97.2524 33.5706 96.7507 33.4626 96.2975 33.2464C95.8452 33.0306 95.4853 32.7049 95.2189 32.2696C94.9526 31.8346 94.8191 31.3034 94.8191 30.6756C94.8191 29.7464 95.1535 29.0048 95.8226 28.4511C96.4917 27.8977 97.6076 27.621 99.1705 27.621C99.7565 27.621 100.337 27.6626 100.911 27.7453V27.5589C100.911 26.7123 100.73 26.1159 100.369 25.7693C100.008 25.4233 99.4902 25.25 98.8155 25.25C98.3476 25.25 97.8475 25.3182 97.3145 25.4542C96.7818 25.5905 96.314 25.7533 95.9115 25.9427L95.5651 24.3442C95.9558 24.1665 96.4709 24.0038 97.1104 23.8557C97.7498 23.7079 98.4245 23.6337 99.1349 23.6337C99.9639 23.6337 100.668 23.7595 101.248 24.011C101.829 24.2627 102.282 24.6951 102.607 25.3075C102.933 25.9205 103.096 26.745 103.096 27.7808V31.5902C103.096 31.9871 103.119 32.5883 103.167 33.3931H101.106Z" fill="white"/>
+    <path d="M104.778 31.0931V19.7709L106.963 19.5933V30.7023C106.963 31.1109 107.032 31.3993 107.171 31.5682C107.31 31.7367 107.531 31.8215 107.833 31.8215C107.969 31.8215 108.162 31.7889 108.41 31.7237L108.668 33.2955C108.46 33.3784 108.207 33.445 107.909 33.4952C107.61 33.5454 107.327 33.5706 107.061 33.5706C105.539 33.5706 104.778 32.7449 104.778 31.0931Z" fill="white"/>
+    <path d="M110.24 31.0931V19.7709L112.424 19.5933V30.7023C112.424 31.1109 112.494 31.3993 112.633 31.5682C112.772 31.7367 112.993 31.8215 113.294 31.8215C113.431 31.8215 113.623 31.7889 113.872 31.7237L114.129 33.2955C113.922 33.3784 113.669 33.445 113.37 33.4952C113.071 33.5454 112.788 33.5706 112.522 33.5706C111 33.5706 110.24 32.7449 110.24 31.0931Z" fill="white"/>
+    <path d="M120.974 27.4878C120.93 26.7241 120.74 26.1514 120.397 25.7693C120.053 25.3877 119.593 25.1966 119.021 25.1966C118.464 25.1966 118 25.3892 117.631 25.7739C117.261 26.1589 117.017 26.7301 116.906 27.4878H120.974ZM123.113 28.882H116.844C116.944 30.889 117.9 31.8924 119.713 31.8924C120.162 31.8924 120.623 31.8376 121.095 31.7282C121.564 31.6184 122.016 31.4721 122.447 31.2884L122.928 32.7891C121.855 33.3104 120.652 33.5706 119.314 33.5706C118.293 33.5706 117.437 33.3784 116.739 32.9935C116.038 32.6088 115.513 32.0552 115.161 31.3328C114.809 30.6109 114.633 29.7405 114.633 28.7221C114.633 27.6626 114.819 26.7507 115.193 25.987C115.565 25.2233 116.085 24.6403 116.75 24.2377C117.416 23.8351 118.185 23.6337 119.056 23.6337C119.963 23.6337 120.716 23.8454 121.324 24.2688C121.931 24.6919 122.38 25.256 122.673 25.9603C122.966 26.6651 123.113 27.4434 123.113 28.2959V28.882Z" fill="white"/>
+    <path d="M124.773 26.2179C124.773 25.6912 124.747 24.8891 124.7 23.8114H126.753C126.788 24.0778 126.821 24.396 126.856 24.7661C126.888 25.136 126.909 25.4364 126.92 25.6673C127.176 25.247 127.425 24.8933 127.671 24.6063C127.918 24.3189 128.205 24.0853 128.534 23.9044C128.862 23.724 129.235 23.6337 129.657 23.6337C129.994 23.6337 130.282 23.6693 130.525 23.7404L130.25 25.6407C130.038 25.5757 129.801 25.543 129.54 25.543C129.026 25.543 128.575 25.6748 128.19 25.9383C127.806 26.2015 127.396 26.6352 126.956 27.2391V33.3931H124.773V26.2179Z" fill="white"/>
+    <path d="M131.757 37.3136C131.438 37.2575 131.174 37.1938 130.968 37.1229L131.367 35.5245C131.514 35.5656 131.702 35.6057 131.928 35.6442C132.151 35.6829 132.365 35.702 132.567 35.702C133.538 35.702 134.265 35.0771 134.749 33.8282L134.893 33.473L131.358 23.8114H133.711L135.489 29.2105C135.776 30.1342 135.964 30.8417 136.046 31.3328C136.213 30.6402 136.407 29.9476 136.633 29.2549L138.437 23.8114H140.645L137.122 33.5175C136.791 34.435 136.43 35.1749 136.046 35.7375C135.662 36.2997 135.207 36.7171 134.685 36.9896C134.16 37.2617 133.529 37.398 132.787 37.398C132.42 37.398 132.077 37.3702 131.757 37.3136Z" fill="white"/>
+    <path d="M49.2529 8.27639H53.1625L53.0525 9.22063H50.3987V11.0493H52.9011V11.934H50.3987V13.9597H53.1945L53.0982 14.913H49.2529V8.27639Z" fill="white"/>
+    <path d="M55.8573 11.5259L53.7949 8.27639H55.0964L56.4944 10.6644L57.9658 8.27639H59.2306L57.1864 11.4846L59.4002 14.913H58.0802L56.4991 12.3006L54.8902 14.913H53.6253L55.8573 11.5259Z" fill="white"/>
+    <path d="M63.1173 11.2394C63.3617 11.0182 63.484 10.7055 63.484 10.3022C63.484 9.89266 63.3593 9.59815 63.1106 9.41775C62.8615 9.23735 62.4954 9.1473 62.0129 9.1473H61.3896V11.5031C61.6768 11.5488 61.8968 11.5717 62.0496 11.5717C62.5169 11.5717 62.873 11.4611 63.1173 11.2394ZM60.2435 8.27639H62.0311C62.8712 8.27639 63.5145 8.4477 63.9607 8.78973C64.4068 9.13205 64.6297 9.6269 64.6297 10.2746C64.6297 10.7146 64.5297 11.0991 64.3297 11.4274C64.1293 11.7559 63.8506 12.0082 63.4931 12.1836C63.1358 12.3596 62.7245 12.4473 62.2602 12.4473C62.0067 12.4473 61.7164 12.4168 61.3896 12.3555V14.913H60.2435V8.27639Z" fill="white"/>
+    <path d="M65.762 8.27639H66.9078V13.9322H69.6531L69.5569 14.913H65.762V8.27639Z" fill="white"/>
+    <path d="M74.3649 13.774C74.6858 13.5587 74.9254 13.2625 75.0844 12.8849C75.2434 12.5077 75.3229 12.0759 75.3229 11.5902C75.3229 11.1135 75.2525 10.689 75.112 10.3159C74.9712 9.9431 74.7468 9.64625 74.4382 9.42449C74.1296 9.20302 73.7325 9.09214 73.2464 9.09214C72.7821 9.09214 72.3878 9.20449 72.064 9.42918C71.7401 9.65358 71.4972 9.95484 71.3353 10.3321C71.1734 10.7096 71.0925 11.1258 71.0925 11.5811C71.0925 12.0607 71.1687 12.4901 71.3215 12.8688C71.4741 13.2478 71.7079 13.5473 72.0229 13.7673C72.3374 13.9873 72.7269 14.0973 73.1915 14.0973C73.653 14.0973 74.044 13.9893 74.3649 13.774ZM71.3949 14.5877C70.9091 14.3097 70.5378 13.9192 70.2811 13.4165C70.0244 12.914 69.8962 12.3297 69.8962 11.6635C69.8962 10.9639 70.0327 10.352 70.3063 9.82782C70.5797 9.30393 70.974 8.89913 71.4888 8.61313C72.0036 8.32772 72.6108 8.18457 73.3107 8.18457C73.9797 8.18457 74.5558 8.32302 75.0387 8.59934C75.5212 8.87625 75.8896 9.26491 76.1431 9.76593C76.3968 10.2672 76.5235 10.8477 76.5235 11.5077C76.5235 12.2197 76.3854 12.8386 76.1088 13.364C75.8321 13.8893 75.4382 14.2944 74.9263 14.5784C74.4145 14.8626 73.8134 15.0047 73.1229 15.0047C72.4567 15.0047 71.8806 14.8658 71.3949 14.5877Z" fill="white"/>
+    <path d="M79.5992 11.4159C79.8769 11.4159 80.123 11.362 80.3369 11.2531C80.5507 11.1449 80.7173 10.9921 80.8364 10.795C80.9558 10.5978 81.0154 10.3693 81.0154 10.1097C81.0154 9.77679 80.9098 9.53303 80.6992 9.37874C80.4883 9.22444 80.1811 9.1473 79.7778 9.1473H78.9482V11.4159H79.5992ZM77.8025 8.27639H79.8787C80.6364 8.27639 81.2102 8.42775 81.5997 8.73018C81.9892 9.0326 82.184 9.46527 82.184 10.0273C82.184 10.3787 82.1136 10.6882 81.9731 10.9554C81.8326 11.2229 81.6584 11.4406 81.4507 11.6084C81.2427 11.7764 81.0292 11.9017 80.8092 11.9844L82.8487 14.913H81.5196L79.7916 12.2822H78.9482V14.913H77.8025V8.27639Z" fill="white"/>
+    <path d="M83.7562 8.27639H87.6658L87.5558 9.22063H84.902V11.0493H87.4044V11.934H84.902V13.9597H87.6978L87.6015 14.913H83.7562V8.27639Z" fill="white"/>
+    <path d="M91.9192 8.27639H93.0649V14.913H91.9192V8.27639Z" fill="white"/>
+    <path d="M96.0944 9.23442H94.0364L94.1373 8.27639H99.3029L99.1973 9.23442H97.2402V14.913H96.0944V9.23442Z" fill="white"/>
+    <path d="M107.246 13.774C107.566 13.5587 107.806 13.2625 107.965 12.8849C108.124 12.5077 108.204 12.0759 108.204 11.5902C108.204 11.1135 108.133 10.689 107.993 10.3159C107.852 9.9431 107.627 9.64625 107.319 9.42449C107.01 9.20302 106.613 9.09214 106.127 9.09214C105.663 9.09214 105.269 9.20449 104.945 9.42918C104.621 9.65358 104.378 9.95484 104.216 10.3321C104.054 10.7096 103.973 11.1258 103.973 11.5811C103.973 12.0607 104.049 12.4901 104.202 12.8688C104.355 13.2478 104.589 13.5473 104.904 13.7673C105.218 13.9873 105.608 14.0973 106.072 14.0973C106.534 14.0973 106.925 13.9893 107.246 13.774ZM104.276 14.5877C103.79 14.3097 103.419 13.9192 103.162 13.4165C102.905 12.914 102.777 12.3297 102.777 11.6635C102.777 10.9639 102.914 10.352 103.187 9.82782C103.46 9.30393 103.855 8.89913 104.37 8.61313C104.884 8.32772 105.492 8.18457 106.192 8.18457C106.861 8.18457 107.436 8.32302 107.92 8.59934C108.402 8.87625 108.77 9.26491 109.024 9.76593C109.277 10.2672 109.404 10.8477 109.404 11.5077C109.404 12.2197 109.266 12.8386 108.99 13.364C108.713 13.8893 108.319 14.2944 107.807 14.5784C107.295 14.8626 106.694 15.0047 106.004 15.0047C105.337 15.0047 104.762 14.8658 104.276 14.5877Z" fill="white"/>
+    <path d="M110.683 8.27639H111.999L115.281 13.4188C115.251 12.9301 115.24 12.4793 115.24 12.0668V8.27639H116.302V14.913H115.029L111.696 9.68791C111.73 10.281 111.746 10.8064 111.746 11.2646V14.913H110.683V8.27639Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M33.1358 8.31192H20.9496C15.209 8.31192 13.1094 10.4116 13.1094 16.1522V28.3386C13.1094 34.079 15.209 36.1786 20.9496 36.1786H33.132C38.8725 36.1786 40.976 34.079 40.976 28.3386V16.1522C40.976 10.4116 38.8764 8.31192 33.1358 8.31192Z" fill="#C91C2E"/>
+    <path d="M25.2668 24.4733H26.3844L25.8238 23.1696L25.2668 24.4733ZM24.9917 25.1304L24.6602 25.8889H23.9054L25.5106 22.2476H26.1627L27.7613 25.8889H26.9863L26.659 25.1304H24.9917ZM37.1365 25.8864H37.8661V22.2476H37.1365V25.8864ZM34.2334 24.3228H35.5778V23.6597H34.2334V22.9138H36.185V22.2499H33.5042V25.8886H36.2554V25.2249H34.2334V24.3228ZM31.335 24.7528L30.5078 22.2475H29.9047L29.0775 24.7528L28.2726 22.2492H27.4859L28.7557 25.8906H29.3676L30.196 23.4987L31.0241 25.8906H31.6415L32.9081 22.2492H32.1417L31.335 24.7528ZM22.792 24.3329C22.792 24.9253 22.4977 25.2418 21.9636 25.2418C21.4265 25.2418 21.1308 24.9163 21.1308 24.3077V22.2496H20.3916V24.3329C20.3916 25.3578 20.961 25.9454 21.9536 25.9454C22.9559 25.9454 23.5309 25.3466 23.5309 24.3028V22.2475H22.792V24.3329ZM18.6278 22.2476H19.3667V25.8909H18.6278V24.4114H16.9584V25.8909H16.2192V22.2476H16.9584V23.7173H18.6278V22.2476Z" fill="white"/>
+    <path d="M27.0428 17.6089C24.4852 17.6089 22.4043 15.528 22.4043 12.9704H23.0596C23.0596 15.1667 24.8463 16.9536 27.0428 16.9536C29.2393 16.9536 31.0259 15.1667 31.0259 12.9704H31.6813C31.6813 15.528 29.6003 17.6089 27.0428 17.6089Z" fill="white"/>
+</svg>
diff --git a/templates/ui/icons/apps/app-store.html b/templates/ui/icons/apps/app-store.html
new file mode 100644
index 00000000..f15b2728
--- /dev/null
+++ b/templates/ui/icons/apps/app-store.html
@@ -0,0 +1,27 @@
+<svg width="153" height="46" viewBox="0 0 153 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.15507" y="0.655698" width="150.5" height="43" rx="6.5" transform="rotate(0.413852 1.15507 0.655698)" fill="black"/>
+    <rect x="1.15507" y="0.655698" width="150.5" height="43" rx="6.5" transform="rotate(0.413852 1.15507 0.655698)" stroke="#A6A6A6"/>
+    <path d="M100.182 21.9926L100.164 24.5126L98.584 24.5012L98.572 26.1538L100.152 26.1652L100.111 31.7806C100.097 33.698 100.959 34.4712 103.141 34.487C103.525 34.4898 103.89 34.4468 104.21 34.3943L104.222 32.7599C103.948 32.7853 103.774 32.8023 103.473 32.8001C102.496 32.7931 102.07 32.3335 102.078 31.2926L102.115 26.1794L104.27 26.195L104.281 24.5423L102.127 24.5268L102.145 22.0067L100.182 21.9926Z" fill="white"/>
+    <path d="M109.768 34.6718C112.671 34.6928 114.466 32.7608 114.489 29.5377C114.512 26.3329 112.737 24.366 109.842 24.3451C106.939 24.3241 105.135 26.2652 105.112 29.47C105.089 32.6931 106.855 34.6508 109.768 34.6718ZM109.78 32.9279C108.073 32.9156 107.123 31.6577 107.139 29.4846C107.154 27.3298 108.122 26.0767 109.83 26.0891C111.528 26.1013 112.487 27.3683 112.471 29.5232C112.456 31.6871 111.479 32.9402 109.78 32.9279Z" fill="white"/>
+    <path d="M115.976 34.5249L117.94 34.5391L117.982 28.6681C117.992 27.2711 119.049 26.3383 120.537 26.349C120.884 26.3515 121.468 26.4197 121.632 26.4756L121.646 24.5399C121.436 24.4836 121.062 24.4535 120.77 24.4514C119.473 24.4421 118.363 25.1463 118.073 26.1212L117.927 26.1202L117.938 24.5953L116.048 24.5817L115.976 34.5249Z" fill="white"/>
+    <path d="M126.509 26.1365C127.961 26.147 128.903 27.1673 128.937 28.729L123.916 28.6927C124.036 27.1413 125.057 26.126 126.509 26.1365ZM128.905 31.9338C128.534 32.7072 127.719 33.1305 126.532 33.1219C124.961 33.1106 123.956 31.9985 123.904 30.2541L123.905 30.1445L130.926 30.1952L130.931 29.5104C130.954 26.3877 129.297 24.4856 126.53 24.4656C123.727 24.4454 121.932 26.4504 121.909 29.6279C121.886 32.8053 123.616 34.7719 126.465 34.7924C128.738 34.8089 130.335 33.7247 130.795 31.9474L128.905 31.9338Z" fill="white"/>
+    <path d="M87.245 30.6453C87.3788 33.088 89.4022 34.6642 92.4305 34.6861C95.6671 34.7095 97.7041 33.0869 97.723 30.4749C97.7378 28.4213 96.5915 27.2774 93.795 26.6041L92.2929 26.2242C90.5168 25.7949 89.8016 25.2314 89.8086 24.2566C89.8175 23.0264 90.94 22.23 92.6151 22.2421C94.205 22.2536 95.2971 23.047 95.4867 24.3071L97.5498 24.322C97.4434 22.0215 95.4298 20.3886 92.657 20.3685C89.6759 20.347 87.6769 21.9509 87.6593 24.3831C87.6448 26.3894 88.7624 27.5899 91.2282 28.185L92.9854 28.6236C94.7899 29.0625 95.5803 29.6929 95.5728 30.7339C95.564 31.9452 94.3085 32.8163 92.605 32.804C90.7785 32.7908 89.5164 31.9583 89.3459 30.6605L87.245 30.6453Z" fill="white"/>
+    <path d="M66.9559 24.0627C65.6046 24.053 64.431 24.7202 63.8202 25.848L63.6741 25.847L63.686 24.2035L61.796 24.1898L61.7003 37.4383L63.6633 37.4525L63.6981 32.6407L63.8533 32.6418C64.3662 33.6956 65.4848 34.3246 66.9 34.3348C69.4109 34.3529 71.0231 32.3831 71.0459 29.2239C71.0687 26.0647 69.4851 24.081 66.9559 24.0627ZM66.3375 32.5684C64.694 32.5566 63.6716 31.2526 63.6866 29.1799C63.7016 27.0981 64.7427 25.809 66.3954 25.821C68.0572 25.833 69.0432 27.1093 69.0281 29.2094C69.0128 31.3185 68.0084 32.5805 66.3375 32.5684Z" fill="white"/>
+    <path d="M77.9521 24.1421C76.6008 24.1324 75.4272 24.7996 74.8164 25.9275L74.6703 25.9264L74.6822 24.2829L72.7921 24.2692L72.6965 37.5178L74.6595 37.5319L74.6943 32.7201L74.8495 32.7212C75.3624 33.775 76.481 34.404 77.8962 34.4142C80.4071 34.4324 82.0193 32.4626 82.0421 29.3034C82.0649 26.1442 80.4813 24.1604 77.9521 24.1421ZM77.3337 32.6479C75.6902 32.636 74.6678 31.332 74.6828 29.2593C74.6978 27.1776 75.7389 25.8885 77.3916 25.9004C79.0533 25.9124 80.0394 27.1888 80.0242 29.2888C80.009 31.398 79.0046 32.6599 77.3337 32.6479Z" fill="white"/>
+    <path d="M58.202 34.1076L60.4544 34.1239L55.6225 20.4323L53.3417 20.4158L48.3125 34.0362L50.4892 34.0519L51.774 30.4364L56.979 30.474L58.202 34.1076ZM54.3554 22.9027L54.5162 22.9039L56.4524 28.691L52.3263 28.6612L54.3554 22.9027Z" fill="white"/>
+    <path d="M49.8038 10.0894L49.7562 16.6771L52.1348 16.6943C54.0978 16.7085 55.2433 15.5069 55.2585 13.4023C55.2735 11.3296 54.1363 10.1207 52.1823 10.1066L49.8038 10.0894ZM50.8197 11.0281L52.0615 11.0371C53.4265 11.0469 54.2283 11.9202 54.2176 13.4085C54.2066 14.9196 53.4061 15.7721 52.0273 15.7622L50.7856 15.7532L50.8197 11.0281Z" fill="white"/>
+    <path d="M58.7154 16.8377C60.1672 16.8482 61.0644 15.8822 61.0761 14.2707C61.0877 12.6683 60.1999 11.6848 58.7527 11.6744C57.3009 11.6639 56.3991 12.6344 56.3875 14.2368C56.3759 15.8484 57.2591 16.8272 58.7154 16.8377ZM58.7217 15.9658C57.868 15.9596 57.3932 15.3307 57.401 14.2441C57.4088 13.1667 57.8927 12.5402 58.7464 12.5463C59.5956 12.5525 60.0749 13.186 60.0671 14.2634C60.0593 15.3454 59.5709 15.9719 58.7217 15.9658Z" fill="white"/>
+    <path d="M68.6752 11.8419L67.6936 11.8348L66.7806 15.6222L66.703 15.6216L65.7077 11.8205L64.7673 11.8137L63.7172 15.6001L63.6442 15.5995L62.7814 11.7993L61.7861 11.7922L63.1198 16.7737L64.1287 16.781L65.1778 13.127L65.2554 13.1275L66.2562 16.7963L67.2742 16.8037L68.6752 11.8419Z" fill="white"/>
+    <path d="M69.7696 16.8217L70.7512 16.8288L70.7722 13.9207C70.7778 13.1446 71.2424 12.664 71.9683 12.6692C72.6942 12.6745 73.0382 13.0742 73.0325 13.8731L73.011 16.8451L73.9925 16.8522L74.0158 13.6337C74.0243 12.4512 73.4174 11.7803 72.308 11.7723C71.5593 11.7669 71.0639 12.0966 70.8179 12.6472L70.7449 12.6467L70.7506 11.8569L69.8055 11.8501L69.7696 16.8217Z" fill="white"/>
+    <path d="M75.5384 16.8634L76.5199 16.8705L76.5698 9.95858L75.5883 9.95149L75.5384 16.8634Z" fill="white"/>
+    <path d="M80.2107 16.993C81.6625 17.0035 82.5598 16.0375 82.5714 14.4259C82.583 12.8235 81.6952 11.8401 80.248 11.8296C78.7963 11.8191 77.8944 12.7897 77.8828 14.3921C77.8712 16.0036 78.7544 16.9825 80.2107 16.993ZM80.217 16.121C79.3633 16.1149 78.8885 15.4859 78.8963 14.3994C78.9041 13.322 79.388 12.6954 80.2417 12.7016C81.0909 12.7077 81.5702 13.3412 81.5625 14.4187C81.5546 15.5006 81.0662 16.1272 80.217 16.121Z" fill="white"/>
+    <path d="M85.4833 16.191C84.9492 16.1872 84.563 15.9241 84.5663 15.4767C84.5694 15.0385 84.8815 14.8079 85.5667 14.7672L86.7816 14.6983L86.7786 15.1138C86.7741 15.7301 86.2229 16.1964 85.4833 16.191ZM85.2263 17.0155C85.8791 17.0202 86.4244 16.7411 86.7248 16.2456L86.8024 16.2462L86.7973 16.9447L87.7423 16.9515L87.7669 13.5549C87.7745 12.5049 87.0759 11.8789 85.8296 11.8699C84.7019 11.8618 83.8945 12.4038 83.7879 13.2568L84.7375 13.2637C84.8496 12.9129 85.2299 12.7148 85.7778 12.7188C86.4489 12.7236 86.7937 13.0229 86.7899 13.5479L86.7868 13.977L85.4395 14.0449C84.2565 14.1094 83.5863 14.6205 83.5798 15.5153C83.5733 16.4238 84.2676 17.0086 85.2263 17.0155Z" fill="white"/>
+    <path d="M91.0726 17.0578C91.7574 17.0627 92.3395 16.7428 92.6402 16.2016L92.7178 16.2022L92.7121 16.9874L93.6526 16.9942L93.7025 10.0823L92.721 10.0752L92.7013 12.8053L92.6282 12.8048C92.3628 12.255 91.7899 11.9267 91.1097 11.9218C89.8542 11.9127 89.039 12.9021 89.0277 14.4726C89.0163 16.0476 89.808 17.0486 91.0726 17.0578ZM91.3818 12.8049C92.2036 12.8108 92.7147 13.4674 92.7073 14.5037C92.6997 15.5446 92.1838 16.1846 91.3575 16.1787C90.5266 16.1727 90.0335 15.5345 90.0412 14.4799C90.0487 13.4344 90.5555 12.7989 91.3818 12.8049Z" fill="white"/>
+    <path d="M100.017 17.1361C101.469 17.1465 102.366 16.1806 102.378 14.569C102.389 12.9666 101.501 11.9831 100.054 11.9727C98.6024 11.9622 97.7005 12.9327 97.689 14.5351C97.6773 16.1467 98.5605 17.1255 100.017 17.1361ZM100.023 16.2641C99.1695 16.2579 98.6946 15.629 98.7025 14.5425C98.7102 13.465 99.1942 12.8385 100.048 12.8447C100.897 12.8508 101.376 13.4843 101.369 14.5617C101.361 15.6437 100.872 16.2702 100.023 16.2641Z" fill="white"/>
+    <path d="M103.659 17.0665L104.64 17.0736L104.661 14.1655C104.667 13.3894 105.132 12.9088 105.857 12.914C106.583 12.9193 106.927 13.319 106.922 14.1179L106.9 17.0899L107.882 17.097L107.905 13.8784C107.914 12.696 107.307 12.0251 106.197 12.0171C105.449 12.0117 104.953 12.3414 104.707 12.892L104.634 12.8915L104.64 12.1017L103.695 12.0949L103.659 17.0665Z" fill="white"/>
+    <path d="M112.447 10.9208L112.438 12.1808L111.648 12.1751L111.642 13.0015L112.432 13.0072L112.412 15.8148C112.405 16.7735 112.836 17.1602 113.927 17.1681C114.119 17.1694 114.301 17.1479 114.461 17.1217L114.467 16.3045C114.33 16.3172 114.243 16.3257 114.093 16.3246C113.604 16.3211 113.391 16.0913 113.395 15.5708L113.414 13.0143L114.491 13.022L114.497 12.1957L113.42 12.1879L113.429 10.9279L112.447 10.9208Z" fill="white"/>
+    <path d="M115.779 17.154L116.76 17.1611L116.781 14.2576C116.787 13.5043 117.238 13.0008 118.041 13.0066C118.735 13.0116 119.102 13.416 119.096 14.2104L119.075 17.1778L120.057 17.1849L120.08 13.9755C120.088 12.7931 119.44 12.1173 118.381 12.1096C117.632 12.1042 117.105 12.4337 116.859 12.9889L116.781 12.9884L116.801 10.2492L115.829 10.2422L115.779 17.154Z" fill="white"/>
+    <path d="M123.628 12.9785C124.354 12.9837 124.825 13.4939 124.842 14.2747L122.331 14.2566C122.392 13.4809 122.902 12.9732 123.628 12.9785ZM124.826 15.8771C124.641 16.2638 124.233 16.4755 123.639 16.4712C122.854 16.4655 122.351 15.9095 122.326 15.0373L122.326 14.9825L125.837 15.0078L125.839 14.6654C125.85 13.1041 125.022 12.153 123.639 12.143C122.237 12.1329 121.339 13.1354 121.328 14.7242C121.317 16.3129 122.181 17.2962 123.606 17.3064C124.743 17.3147 125.541 16.7726 125.771 15.8839L124.826 15.8771Z" fill="white"/>
+    <path d="M37.7422 22.7515C37.7794 20.9026 38.7851 19.1602 40.3674 18.2031C39.3838 16.7766 37.7258 15.8647 35.9943 15.798C34.1486 15.5908 32.3485 16.877 31.4073 16.8702C30.4478 16.8633 29.0065 15.7668 27.4457 15.7876C25.4111 15.8386 23.5064 16.9814 22.5039 18.7526C20.35 22.4204 21.8977 27.8449 23.914 30.8368C24.923 32.302 26.1028 33.9391 27.6624 33.8926C29.1886 33.8403 29.765 32.9348 31.6067 32.9481C33.4312 32.9613 33.9588 33.9381 35.5499 33.9129C37.1873 33.8981 38.2291 32.4678 39.2236 31.0033C39.9636 29.9698 40.5356 28.8258 40.9184 27.6137C39.0002 26.786 37.7294 24.8405 37.7422 22.7515Z" fill="white"/>
+    <path d="M34.8018 13.8313C35.7021 12.7662 36.1519 11.392 36.0554 10.0006C34.6906 10.134 33.4262 10.7767 32.514 11.8006C31.622 12.8011 31.1519 14.1509 31.2292 15.489C32.5934 15.5129 33.9392 14.8884 34.8018 13.8313Z" fill="white"/>
+</svg>
diff --git a/templates/ui/icons/apps/f-droid.html b/templates/ui/icons/apps/f-droid.html
new file mode 100644
index 00000000..39d098ec
--- /dev/null
+++ b/templates/ui/icons/apps/f-droid.html
@@ -0,0 +1,88 @@
+<svg width="152" height="45" viewBox="0 0 152 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="0.745239" width="150.5" height="43" rx="4.5" fill="black"/>
+    <rect x="0.5" y="0.745239" width="150.5" height="43" rx="4.5" stroke="#A6A6A6"/>
+    <path d="M60.8047 34.3452V32.9341L62.2616 32.6592V22.6989L60.8047 22.424V21.0037H71.1865V24.4674H69.3813L69.2347 22.7905H64.5707V26.859H69.3355V28.6458H64.5707V32.6592L66.0276 32.9341V34.3452H60.8047Z" fill="white"/>
+    <path d="M73.0557 29.5621V27.7753H77.9305V29.5621H73.0557Z" fill="white"/>
+    <path d="M79.7723 34.3452V32.9341L81.2384 32.65V22.7172L79.7723 22.424V21.0037H85.3618C86.5469 21.0037 87.5884 21.2847 88.4864 21.8467C89.3844 22.4087 90.0838 23.1815 90.5847 24.165C91.0856 25.1485 91.3361 26.2756 91.3361 27.5462V27.8119C91.3361 29.0642 91.0887 30.1852 90.5939 31.1748C90.1052 32.1583 89.4179 32.9341 88.5322 33.5022C87.6464 34.0642 86.611 34.3452 85.4259 34.3452H79.7723ZM83.5475 32.5676H85.3068C86.0887 32.5676 86.7545 32.3599 87.3043 31.9445C87.8602 31.523 88.2848 30.9549 88.578 30.2401C88.8712 29.5193 89.0178 28.7099 89.0178 27.8119V27.537C89.0178 26.6207 88.8712 25.8052 88.578 25.0905C88.2848 24.3758 87.8602 23.8138 87.3043 23.4045C86.7545 22.9952 86.0887 22.7905 85.3068 22.7905H83.5475V32.5676Z" fill="white"/>
+    <path d="M92.7106 34.3452V32.9341L94.0759 32.6592V26.1259L92.6281 25.851V24.4307H96.2017L96.3208 25.6769L96.3391 25.8785C96.8706 24.7912 97.6403 24.2475 98.6482 24.2475C99.027 24.2475 99.366 24.2963 99.6653 24.3941L99.3996 26.5291L98.1076 26.4558C97.6861 26.4313 97.3379 26.5138 97.063 26.7032C96.7881 26.8926 96.5621 27.1552 96.3849 27.4912V32.6592L97.7594 32.9341V34.3452H92.7106Z" fill="white"/>
+    <path d="M105.044 34.5376C104.091 34.5376 103.273 34.3238 102.588 33.8962C101.904 33.4625 101.379 32.8669 101.012 32.1094C100.646 31.3519 100.463 30.4784 100.463 29.4888V29.2963C100.463 28.3128 100.646 27.4423 101.012 26.6849C101.379 25.9274 101.904 25.3318 102.588 24.8981C103.273 24.4643 104.085 24.2475 105.026 24.2475C105.979 24.2475 106.797 24.4643 107.481 24.8981C108.166 25.3257 108.691 25.9213 109.057 26.6849C109.424 27.4423 109.607 28.3128 109.607 29.2963V29.4888C109.607 30.4845 109.424 31.3611 109.057 32.1186C108.691 32.876 108.166 33.4686 107.481 33.8962C106.803 34.3238 105.991 34.5376 105.044 34.5376ZM105.044 32.76C105.808 32.76 106.376 32.4576 106.748 31.8528C107.121 31.242 107.307 30.4539 107.307 29.4888V29.2963C107.307 28.3495 107.118 27.5706 106.739 26.9597C106.367 26.3428 105.795 26.0343 105.026 26.0343C104.262 26.0343 103.694 26.3428 103.321 26.9597C102.955 27.5706 102.772 28.3495 102.772 29.2963V29.4888C102.772 30.4539 102.955 31.242 103.321 31.8528C103.694 32.4576 104.268 32.76 105.044 32.76Z" fill="white"/>
+    <path d="M110.817 34.3452V32.9341L112.191 32.6592V26.1259L110.734 25.851V24.4307H114.5V32.6592L115.866 32.9341V34.3452H110.817ZM112.1 22.1858V20.0508H114.5V22.1858H112.1Z" fill="white"/>
+    <path d="M120.768 34.5376C119.968 34.5376 119.284 34.336 118.715 33.9329C118.147 33.5297 117.711 32.9677 117.405 32.2469C117.106 31.5199 116.956 30.6739 116.956 29.7087V29.5163C116.956 28.4655 117.106 27.5462 117.405 26.7582C117.711 25.964 118.147 25.347 118.715 24.9072C119.284 24.4674 119.965 24.2475 120.759 24.2475C121.327 24.2475 121.822 24.3574 122.243 24.5773C122.671 24.7912 123.037 25.0996 123.343 25.5028V21.746L121.886 21.4711V20.0508H125.652V32.6592L127.026 32.9341V34.3452H123.654L123.471 33.1448C122.83 34.0734 121.929 34.5376 120.768 34.5376ZM121.418 32.7142C121.858 32.7142 122.237 32.6164 122.555 32.4209C122.872 32.2255 123.135 31.9475 123.343 31.5871V27.2163C123.141 26.8559 122.878 26.5749 122.555 26.3733C122.237 26.1717 121.864 26.0709 121.437 26.0709C120.685 26.0709 120.136 26.3886 119.787 27.0239C119.439 27.6592 119.265 28.49 119.265 29.5163V29.7087C119.265 30.625 119.433 31.355 119.769 31.8987C120.111 32.4423 120.661 32.7142 121.418 32.7142Z" fill="white"/>
+    <path d="M65.9301 14.7885C65.6914 15.0997 65.3604 15.3355 64.9373 15.4956C64.5142 15.6558 64.0337 15.7359 63.4958 15.7359C62.9427 15.7359 62.4531 15.6105 62.027 15.3596C61.6009 15.1088 61.2715 14.7507 61.0388 14.2853C60.8091 13.8168 60.6897 13.2713 60.6807 12.6488V12.132C60.6807 11.1347 60.9194 10.3565 61.3969 9.7974C61.8744 9.23528 62.5408 8.95422 63.3961 8.95422C64.1304 8.95422 64.7137 9.13555 65.1459 9.49821C65.578 9.86086 65.8379 10.3837 65.9256 11.0667H64.8013C64.6744 10.2719 64.2135 9.87446 63.4187 9.87446C62.905 9.87446 62.5136 10.0603 62.2446 10.432C61.9787 10.8007 61.8412 11.3432 61.8321 12.0595V12.5672C61.8321 13.2804 61.9817 13.835 62.2809 14.2309C62.5831 14.6237 63.0017 14.8202 63.5366 14.8202C64.1229 14.8202 64.5399 14.6872 64.7877 14.4213V13.1293H63.4278V12.2589H65.9301V14.7885Z" fill="white"/>
+    <path d="M71.1409 12.6986H68.4301V14.7295H71.5988V15.6452H67.2832V9.04489H71.5671V9.96966H68.4301V11.792H71.1409V12.6986Z" fill="white"/>
+    <path d="M77.4851 9.96966H75.427V15.6452H74.2892V9.96966H72.2492V9.04489H77.4851V9.96966Z" fill="white"/>
+    <path d="M81.7914 15.6452H80.6491V9.04489H81.7914V15.6452Z" fill="white"/>
+    <path d="M87.927 9.96966H85.869V15.6452H84.7311V9.96966H82.6912V9.04489H87.927V9.96966Z" fill="white"/>
+    <path d="M96.2906 12.5173C96.2906 13.1641 96.1788 13.7322 95.9552 14.2218C95.7315 14.7084 95.4112 15.0831 94.9941 15.346C94.5801 15.6059 94.1026 15.7359 93.5616 15.7359C93.0267 15.7359 92.5492 15.6059 92.1291 15.346C91.7121 15.0831 91.3887 14.7099 91.159 14.2263C90.9324 13.7428 90.8175 13.1852 90.8145 12.5536V12.1819C90.8145 11.5381 90.9278 10.97 91.1545 10.4774C91.3842 9.98477 91.706 9.60852 92.1201 9.34861C92.5371 9.08569 93.0146 8.95422 93.5526 8.95422C94.0905 8.95422 94.5665 9.08418 94.9805 9.34408C95.3976 9.60096 95.7194 9.97268 95.9461 10.4592C96.1727 10.9428 96.2876 11.5064 96.2906 12.1501V12.5173ZM95.1437 12.1728C95.1437 11.4414 95.0047 10.8808 94.7267 10.491C94.4516 10.1011 94.0603 9.9062 93.5526 9.9062C93.0569 9.9062 92.6686 10.1011 92.3875 10.491C92.1095 10.8778 91.9674 11.4263 91.9614 12.1365V12.5173C91.9614 13.2426 92.1019 13.8032 92.383 14.1991C92.6671 14.595 93.0599 14.793 93.5616 14.793C94.0693 14.793 94.4592 14.5996 94.7312 14.2127C95.0062 13.8259 95.1437 13.2608 95.1437 12.5173V12.1728Z" fill="white"/>
+    <path d="M102.762 15.6452H101.615L98.6727 10.9624V15.6452H97.5258V9.04489H98.6727L101.624 13.7458V9.04489H102.762V15.6452Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M48.3535 10.9955C48.6757 11.3177 49.1981 11.3177 49.5202 10.9955L53.0204 7.49531C53.3426 7.17312 53.3426 6.65076 53.0204 6.32858L48.3535 10.9955Z" fill="#8AB000"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M48.3535 10.9955C48.6757 11.3177 49.1981 11.3177 49.5202 10.9955L53.0204 7.49531C53.3426 7.17312 53.3426 6.65076 53.0204 6.32858L48.3535 10.9955Z" fill="#263238" fill-opacity="0.2"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M48.3534 10.9955C48.0312 10.6733 48.0312 10.1509 48.3534 9.82875L51.8536 6.32857C52.1757 6.00639 52.6981 6.00639 53.0203 6.32857L48.3534 10.9955Z" fill="#8AB000"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M48.3534 10.9955C48.0312 10.6733 48.0312 10.1509 48.3534 9.82875L51.8536 6.32857C52.1757 6.00639 52.6981 6.00639 53.0203 6.32857L48.3534 10.9955Z" fill="white" fill-opacity="0.3"/>
+    <path d="M48.3534 10.9955C48.1601 10.8022 48.2646 10.3843 48.5868 10.0621L52.087 6.56197C52.4091 6.23978 52.827 6.13531 53.0203 6.32862C53.2136 6.52193 53.1092 6.93982 52.787 7.262L49.2868 10.7622C48.9646 11.0844 48.5467 11.1888 48.3534 10.9955Z" fill="#8AB000"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M22.2837 6.32861C21.9615 6.6508 21.9615 7.17316 22.2837 7.49534L25.7839 10.9955C26.1061 11.3177 26.6284 11.3177 26.9506 10.9955L22.2837 6.32861Z" fill="#8AB000"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M22.2837 6.32861C21.9615 6.6508 21.9615 7.17316 22.2837 7.49534L25.7839 10.9955C26.1061 11.3177 26.6284 11.3177 26.9506 10.9955L22.2837 6.32861Z" fill="#263238" fill-opacity="0.2"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M22.2833 6.3286C22.6055 6.00642 23.1279 6.00642 23.4501 6.3286L26.9502 9.82878C27.2724 10.151 27.2724 10.6733 26.9502 10.9955L22.2833 6.3286Z" fill="#8AB000"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M22.2833 6.3286C22.6055 6.00642 23.1279 6.00642 23.4501 6.3286L26.9502 9.82878C27.2724 10.151 27.2724 10.6733 26.9502 10.9955L22.2833 6.3286Z" fill="white" fill-opacity="0.3"/>
+    <path d="M22.2838 6.32866C22.4771 6.13535 22.895 6.23982 23.2172 6.562L26.7173 10.0622C27.0395 10.3844 27.144 10.8023 26.9507 10.9956C26.7574 11.1889 26.3395 11.0844 26.0173 10.7622L22.5171 7.26204C22.1949 6.93985 22.0905 6.52197 22.2838 6.32866Z" fill="#8AB000"/>
+    <g filter="url(#filter0_ii_825_21273)">
+        <path d="M25 11.2453C25 10.0303 25.985 9.04529 27.2 9.04529H48.1C49.315 9.04529 50.3 10.0303 50.3 11.2453V15.6453C50.3 16.8603 49.315 17.8453 48.1 17.8453H27.2C25.985 17.8453 25 16.8603 25 15.6453V11.2453Z" fill="#AEEA00"/>
+    </g>
+    <g filter="url(#filter1_ii_825_21273)">
+        <path d="M25 21.1452C25 19.9302 25.985 18.9452 27.2 18.9452H48.1C49.315 18.9452 50.3 19.9302 50.3 21.1452V34.3452C50.3 35.5602 49.315 36.5452 48.1 36.5452H27.2C25.985 36.5452 25 35.5602 25 34.3452V21.1452Z" fill="#1976D2"/>
+    </g>
+    <path d="M37.6518 31.5953C39.7781 31.5953 41.5018 29.8716 41.5018 27.7453C41.5018 25.619 39.7781 23.8953 37.6518 23.8953C35.9077 23.8953 34.4345 25.0549 33.9612 26.6453H35.7461C36.1265 25.9877 36.8374 25.5453 37.6518 25.5453C38.8668 25.5453 39.8518 26.5302 39.8518 27.7453C39.8518 28.9603 38.8668 29.9453 37.6518 29.9453C36.8374 29.9453 36.1265 29.5028 35.7461 28.8453H33.9612C34.4345 30.4356 35.9077 31.5953 37.6518 31.5953Z" fill="#0D47A1"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M44.2518 27.7453C44.2518 31.3903 41.2968 34.3453 37.6518 34.3453C34.0067 34.3453 31.0518 31.3903 31.0518 27.7453C31.0518 24.1002 34.0067 21.1453 37.6518 21.1453C41.2968 21.1453 44.2518 24.1002 44.2518 27.7453ZM43.1518 27.7453C43.1518 30.7828 40.6893 33.2453 37.6518 33.2453C34.6142 33.2453 32.1518 30.7828 32.1518 27.7453C32.1518 24.7077 34.6142 22.2453 37.6518 22.2453C40.6893 22.2453 43.1518 24.7077 43.1518 27.7453Z" fill="#0D47A1"/>
+    <g filter="url(#filter2_d_825_21273)">
+        <path d="M31.0501 15.6452C32.2651 15.6452 33.2501 14.6603 33.2501 13.4452C33.2501 12.2302 32.2651 11.2452 31.0501 11.2452C29.8351 11.2452 28.8501 12.2302 28.8501 13.4452C28.8501 14.6603 29.8351 15.6452 31.0501 15.6452Z" fill="white"/>
+        <path d="M44.2501 15.6452C45.4651 15.6452 46.4501 14.6603 46.4501 13.4452C46.4501 12.2302 45.4651 11.2452 44.2501 11.2452C43.0351 11.2452 42.0501 12.2302 42.0501 13.4452C42.0501 14.6603 43.0351 15.6452 44.2501 15.6452Z" fill="white"/>
+    </g>
+    <path d="M22.2836 6.32855C22.6058 6.00637 23.1282 6.00637 23.4504 6.32855L26.3411 9.21928C26.605 9.10719 26.8954 9.04519 27.2003 9.04519H48.1003C48.4061 9.04519 48.6974 9.10759 48.962 9.22036L51.8538 6.32856C52.176 6.00637 52.6983 6.00637 53.0205 6.32856C53.3427 6.65074 53.3427 7.1731 53.0205 7.49528L50.1273 10.3886C50.2387 10.6518 50.3003 10.9413 50.3003 11.2452V15.6452C50.3003 16.8602 49.3153 17.8452 48.1003 17.8452H27.2003C25.9852 17.8452 25.0003 16.8602 25.0003 15.6452V11.2452C25.0003 10.9403 25.0623 10.65 25.1744 10.386L22.2836 7.49528C21.9614 7.17309 21.9614 6.65073 22.2836 6.32855Z" fill="url(#paint0_radial_825_21273)"/>
+    <path d="M27.2003 18.9452C25.9852 18.9452 25.0003 19.9302 25.0003 21.1452V34.3452C25.0003 35.5602 25.9852 36.5452 27.2003 36.5452H48.1003C49.3153 36.5452 50.3003 35.5602 50.3003 34.3452V21.1452C50.3003 19.9302 49.3153 18.9452 48.1003 18.9452H27.2003Z" fill="url(#paint1_radial_825_21273)"/>
+    <defs>
+        <filter id="filter0_ii_825_21273" x="25" y="9.04529" width="25.2998" height="8.80005" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="-1"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0.14902 0 0 0 0 0.196078 0 0 0 0 0.219608 0 0 0 0.2 0"/>
+            <feBlend mode="normal" in2="shape" result="effect1_innerShadow_825_21273"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="1"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
+            <feBlend mode="normal" in2="effect1_innerShadow_825_21273" result="effect2_innerShadow_825_21273"/>
+        </filter>
+        <filter id="filter1_ii_825_21273" x="25" y="18.9452" width="25.2998" height="17.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="-1"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0.14902 0 0 0 0 0.196078 0 0 0 0 0.219608 0 0 0 0.2 0"/>
+            <feBlend mode="normal" in2="shape" result="effect1_innerShadow_825_21273"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="1"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"/>
+            <feBlend mode="normal" in2="effect1_innerShadow_825_21273" result="effect2_innerShadow_825_21273"/>
+        </filter>
+        <filter id="filter2_d_825_21273" x="28.8501" y="10.7452" width="17.6001" height="4.90002" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="-0.5"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0.14902 0 0 0 0 0.196078 0 0 0 0 0.219608 0 0 0 0.2 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_825_21273"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_825_21273" result="shape"/>
+        </filter>
+        <radialGradient id="paint0_radial_825_21273" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21.8051 5.84925) rotate(90) scale(30.6959 31.2553)">
+            <stop stop-color="white" stop-opacity="0.1"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint1_radial_825_21273" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21.8051 5.84925) rotate(90) scale(30.6959 31.2553)">
+            <stop stop-color="white" stop-opacity="0.1"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </radialGradient>
+    </defs>
+</svg>
diff --git a/templates/ui/icons/apps/google-play.html b/templates/ui/icons/apps/google-play.html
new file mode 100644
index 00000000..d0e704e6
--- /dev/null
+++ b/templates/ui/icons/apps/google-play.html
@@ -0,0 +1,77 @@
+<svg width="153" height="46" viewBox="0 0 153 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.65946" y="0.503598" width="150.5" height="43" rx="4.5" transform="rotate(0.413852 1.65946 0.503598)" fill="black"/>
+    <rect x="1.65946" y="0.503598" width="150.5" height="43" rx="4.5" transform="rotate(0.413852 1.65946 0.503598)" stroke="#A6A6A6"/>
+    <path d="M77.9381 24.4815C75.351 24.4628 73.2281 26.4154 73.2085 29.1257C73.1891 31.8195 75.2834 33.8191 77.8705 33.8378C80.4587 33.8565 82.5817 31.8874 82.6012 29.1936C82.6197 26.4832 80.5252 24.5001 77.9381 24.4815ZM77.8838 31.9965C76.466 31.9862 75.2523 30.8081 75.2644 29.1417C75.2765 27.4576 76.508 26.3148 77.9248 26.325C79.3426 26.3352 80.5564 27.4957 80.5442 29.1798C80.5322 30.8452 79.3017 32.0067 77.8838 31.9965ZM67.693 24.4075C65.1058 24.3888 62.983 26.3414 62.9634 29.0517C62.9439 31.7455 65.0382 33.7451 67.6254 33.7638C70.2136 33.7825 72.3366 31.8134 72.3561 29.1196C72.3756 26.4092 70.2812 24.4261 67.693 24.4075ZM67.6387 31.9225C66.2208 31.9122 65.0072 30.7341 65.0192 29.0677C65.0314 27.3836 66.2629 26.2408 67.6796 26.251C69.0975 26.2612 70.3113 27.4217 70.2991 29.1058C70.2882 30.7712 69.0565 31.9327 67.6387 31.9225ZM55.4971 25.756L55.4828 27.7403L60.2325 27.7747C60.0825 28.8901 59.7048 29.7025 59.1331 30.2649C58.4374 30.9507 57.3506 31.7051 55.4542 31.6914C52.5305 31.6703 50.2618 29.2966 50.2829 26.3729C50.304 23.4491 52.6068 21.1084 55.5305 21.1295C57.1079 21.1409 58.2551 21.7696 59.0996 22.5732L60.51 21.1831C59.3302 20.0404 57.7602 19.1612 55.5449 19.1452C51.5399 19.1162 48.1493 22.3522 48.1204 26.3572C48.0914 30.3622 51.4349 33.6469 55.4399 33.6758C57.6013 33.6914 59.2377 32.9937 60.5222 31.6741C61.8428 30.3725 62.2642 28.5318 62.275 27.0436C62.2783 26.5838 62.2462 26.1579 62.1772 25.8031L55.4971 25.7549L55.4971 25.756ZM105.323 27.657C104.942 26.6093 103.768 24.668 101.34 24.6505C98.93 24.6331 96.9132 26.515 96.8931 29.2968C96.8742 31.9191 98.8448 33.9893 101.502 34.0085C103.646 34.024 104.896 32.7218 105.417 31.9632L103.829 30.888C103.292 31.6641 102.562 32.1725 101.516 32.165C100.471 32.1574 99.7294 31.6735 99.2577 30.7307L105.532 28.1888L105.323 27.657ZM98.9324 29.1707C98.8926 27.362 100.352 26.4518 101.398 26.4594C102.214 26.4652 102.901 26.8783 103.128 27.4641L98.9324 29.1707ZM93.8144 33.6703L95.8692 33.6851L95.9685 19.9344L93.9138 19.9195L93.8144 33.6703ZM90.5043 25.6183L90.4339 25.6178C89.977 25.0645 89.094 24.562 87.9786 24.554C85.639 24.5371 83.4803 26.5774 83.4612 29.2185C83.4423 31.8408 85.5714 33.8945 87.911 33.9114C89.0275 33.9195 89.9166 33.4298 90.3816 32.8667L90.452 32.8672L90.4471 33.5403C90.4342 35.33 89.4703 36.2801 87.9292 36.2689C86.6708 36.2598 85.8975 35.3511 85.584 34.5865L83.789 35.3183C84.2937 36.5617 85.6467 38.0961 87.9159 38.1125C90.3259 38.1299 92.3744 36.7267 92.3994 33.2706L92.4601 24.8713L90.5109 24.8572L90.5054 25.6184L90.5043 25.6183ZM88.1015 32.0703C86.6836 32.06 85.5053 30.8635 85.5171 29.2333C85.529 27.5845 86.7246 26.3886 88.1424 26.3988C89.5416 26.4089 90.6318 27.6213 90.6198 29.2702C90.6081 30.9003 89.5006 32.0804 88.1015 32.0703ZM115.008 20.0719L110.09 20.0364L109.991 33.7871L112.042 33.8019L112.08 28.5925L114.945 28.6132C117.22 28.6296 119.469 26.9991 119.488 24.3757C119.507 21.7522 117.283 20.0883 115.008 20.0719ZM115.013 26.6996L112.094 26.6785L112.128 21.9651L115.047 21.9862C116.581 21.9973 117.443 23.2741 117.436 24.3608C117.428 25.4256 116.547 26.7107 115.013 26.6996ZM127.712 24.8168C126.226 24.806 124.682 25.4494 124.035 26.8957L125.851 27.6689C126.246 26.9116 126.974 26.6683 127.734 26.6738C128.795 26.6815 129.87 27.3261 129.879 28.4581L129.878 28.6C129.508 28.385 128.714 28.0614 127.741 28.0544C125.778 28.0402 123.77 29.1048 123.756 31.1211C123.743 32.9613 125.344 34.1576 127.148 34.1707C128.528 34.1806 129.293 33.5668 129.776 32.8443L129.846 32.8448L129.839 33.9063L131.821 33.9206L131.859 28.6484C131.878 26.2087 130.064 24.8338 127.712 24.8168ZM127.409 32.3509C126.738 32.346 125.802 32.0027 125.808 31.1711C125.816 30.1096 126.987 29.7111 127.996 29.7184C128.896 29.7249 129.321 29.9226 129.867 30.1917C129.698 31.4654 128.595 32.3595 127.409 32.3509ZM139.102 25.1994L136.706 31.1442L136.636 31.1437L134.237 25.1642L132.026 25.1482L135.628 33.507L133.506 38.1272L135.647 38.1426L141.385 25.2158L139.102 25.1994ZM120.553 33.8634L122.604 33.8782L122.703 20.1275L120.652 20.1127L120.553 33.8634Z" fill="white"/>
+    <path d="M55.2403 11.6581C55.2337 12.5799 54.9556 13.3116 54.4049 13.8555C53.7798 14.5022 52.9679 14.8219 51.9735 14.8147C51.021 14.8078 50.2127 14.472 49.5519 13.8072C48.8901 13.1413 48.5628 12.3205 48.5698 11.3437C48.5769 10.3659 48.9161 9.5499 49.5874 8.89473C50.2577 8.23846 51.0707 7.91432 52.0233 7.9212C52.4963 7.92462 52.9477 8.02028 53.3754 8.20707C53.8041 8.39498 54.1467 8.64276 54.4018 8.95151L53.818 9.52811C53.385 9.00247 52.7852 8.73743 52.0164 8.73187C51.3212 8.72685 50.7188 8.96671 50.2082 9.45143C49.6976 9.93616 49.44 10.569 49.4344 11.3489C49.4288 12.1288 49.6772 12.7653 50.1807 13.2573C50.6843 13.7494 51.2831 13.9979 51.9783 14.0029C52.7153 14.0083 53.3319 13.7674 53.8272 13.2793C54.1485 12.9615 54.3365 12.5173 54.3901 11.9468L51.9933 11.9295L51.999 11.1364L55.1966 11.1595C55.2284 11.3324 55.2415 11.4986 55.2403 11.6581Z" fill="white"/>
+    <path d="M60.3312 8.9383L57.3261 8.91659L57.311 11.0087L60.0213 11.0283L60.0156 11.8214L57.3052 11.8018L57.2901 13.894L60.2952 13.9157L60.2894 14.7274L56.4362 14.6996L56.4839 8.09979L60.3371 8.12762L60.3312 8.9383Z" fill="white"/>
+    <path d="M63.8653 14.7533L63.0172 14.7471L63.059 8.958L61.2154 8.94468L61.2213 8.13401L65.7565 8.16676L65.7506 8.97744L63.9071 8.96413L63.8653 14.7533Z" fill="white"/>
+    <path d="M68.99 14.7903L69.0377 8.19047L69.8857 8.19659L69.8381 14.7964L68.99 14.7903Z" fill="white"/>
+    <path d="M73.599 14.8236L72.751 14.8175L72.7928 9.02831L70.9492 9.01499L70.9551 8.20432L75.4903 8.23707L75.4844 9.04775L73.6409 9.03444L73.599 14.8236Z" fill="white"/>
+    <path d="M84.0338 14.0464C83.38 14.7083 82.5713 15.0358 81.6066 15.0288C80.6419 15.0219 79.8381 14.6827 79.195 14.0115C78.5508 13.3402 78.2333 12.5217 78.2403 11.557C78.2473 10.5923 78.5766 9.7785 79.2304 9.1166C79.8831 8.4547 80.6918 8.12613 81.6564 8.1331C82.6156 8.14003 83.4184 8.48133 84.0647 9.15592C84.7111 9.83051 85.0308 10.6468 85.0238 11.606C85.0169 12.5707 84.6865 13.3845 84.0338 14.0464ZM79.8249 13.4627C80.3097 13.9612 80.9052 14.2119 81.6125 14.217C82.3198 14.2221 82.9199 13.979 83.4108 13.4886C83.9028 12.9972 84.1526 12.3675 84.1582 11.5998C84.1637 10.832 83.923 10.1988 83.4382 9.70031C82.9544 9.2018 82.3578 8.95109 81.6506 8.94598C80.9433 8.94087 80.3442 9.18405 79.8522 9.67441C79.3614 10.1659 79.1115 10.7955 79.106 11.5633C79.1004 12.331 79.3412 12.9642 79.8249 13.4627Z" fill="white"/>
+    <path d="M86.1902 14.9145L86.2379 8.31471L87.2696 8.32216L90.4401 13.4789L90.4764 13.4792L90.4493 12.2073L90.4772 8.34533L91.3252 8.35145L91.2776 14.9513L90.3921 14.9449L87.075 9.53739L87.0387 9.53712L87.0658 10.809L87.0361 14.9206L86.1902 14.9145Z" fill="white"/>
+    <path d="M55.2403 11.6581C55.2337 12.5799 54.9556 13.3116 54.4049 13.8555C53.7798 14.5022 52.9679 14.8219 51.9735 14.8147C51.021 14.8078 50.2127 14.472 49.5519 13.8072C48.8901 13.1413 48.5628 12.3205 48.5698 11.3437C48.5769 10.3659 48.9161 9.5499 49.5874 8.89473C50.2577 8.23846 51.0707 7.91432 52.0233 7.9212C52.4963 7.92462 52.9477 8.02028 53.3754 8.20707C53.8041 8.39498 54.1467 8.64276 54.4018 8.95151L53.818 9.52811C53.385 9.00247 52.7852 8.73743 52.0164 8.73187C51.3212 8.72685 50.7188 8.96671 50.2082 9.45143C49.6976 9.93616 49.44 10.569 49.4344 11.3489C49.4288 12.1288 49.6772 12.7653 50.1807 13.2573C50.6843 13.7494 51.2831 13.9979 51.9783 14.0029C52.7153 14.0083 53.3319 13.7674 53.8272 13.2793C54.1485 12.9615 54.3365 12.5173 54.3901 11.9468L51.9933 11.9295L51.999 11.1364L55.1966 11.1595C55.2284 11.3324 55.2415 11.4986 55.2403 11.6581Z" stroke="white" stroke-width="0.2" stroke-miterlimit="10"/>
+    <path d="M60.3312 8.9383L57.3261 8.91659L57.311 11.0087L60.0213 11.0283L60.0156 11.8214L57.3052 11.8018L57.2901 13.894L60.2952 13.9157L60.2894 14.7274L56.4362 14.6996L56.4839 8.09979L60.3371 8.12762L60.3312 8.9383Z" stroke="white" stroke-width="0.2" stroke-miterlimit="10"/>
+    <path d="M63.8653 14.7533L63.0172 14.7471L63.059 8.958L61.2154 8.94468L61.2213 8.13401L65.7565 8.16676L65.7506 8.97744L63.9071 8.96413L63.8653 14.7533Z" stroke="white" stroke-width="0.2" stroke-miterlimit="10"/>
+    <path d="M68.99 14.7903L69.0377 8.19047L69.8857 8.19659L69.8381 14.7964L68.99 14.7903Z" stroke="white" stroke-width="0.2" stroke-miterlimit="10"/>
+    <path d="M73.599 14.8236L72.751 14.8175L72.7928 9.02831L70.9492 9.01499L70.9551 8.20432L75.4903 8.23707L75.4844 9.04775L73.6409 9.03444L73.599 14.8236Z" stroke="white" stroke-width="0.2" stroke-miterlimit="10"/>
+    <path d="M84.0338 14.0464C83.38 14.7083 82.5713 15.0358 81.6066 15.0288C80.6419 15.0219 79.8381 14.6827 79.195 14.0115C78.5508 13.3402 78.2333 12.5217 78.2403 11.557C78.2473 10.5923 78.5766 9.7785 79.2304 9.1166C79.8831 8.4547 80.6918 8.12613 81.6564 8.1331C82.6156 8.14003 83.4184 8.48133 84.0647 9.15592C84.7111 9.83051 85.0308 10.6468 85.0238 11.606C85.0169 12.5707 84.6865 13.3845 84.0338 14.0464ZM79.8249 13.4627C80.3097 13.9612 80.9052 14.2119 81.6125 14.217C82.3198 14.2221 82.9199 13.979 83.4108 13.4886C83.9028 12.9972 84.1526 12.3675 84.1582 11.5998C84.1637 10.832 83.923 10.1988 83.4382 9.70031C82.9544 9.2018 82.3578 8.95109 81.6506 8.94598C80.9433 8.94087 80.3442 9.18405 79.8522 9.67441C79.3614 10.1659 79.1115 10.7955 79.106 11.5633C79.1004 12.331 79.3412 12.9642 79.8249 13.4627Z" stroke="white" stroke-width="0.2" stroke-miterlimit="10"/>
+    <path d="M86.1902 14.9145L86.2379 8.31471L87.2696 8.32216L90.4401 13.4789L90.4764 13.4792L90.4493 12.2073L90.4772 8.34533L91.3252 8.35145L91.2776 14.9513L90.3921 14.9449L87.075 9.53739L87.0387 9.53712L87.0658 10.809L87.0361 14.9206L86.1902 14.9145Z" stroke="white" stroke-width="0.2" stroke-miterlimit="10"/>
+    <g filter="url(#filter0_ii_825_21267)">
+        <path d="M14.5834 8.38891C14.2609 8.72539 14.0679 9.24981 14.063 9.93069L13.8872 34.2577C13.8823 34.9396 14.0677 35.4657 14.3854 35.8068L14.4662 35.8866L28.1922 22.3575L28.1933 22.1969L28.1945 22.0363L14.6654 8.3092L14.5834 8.38891Z" fill="url(#paint0_linear_825_21267)"/>
+        <path d="M32.7009 26.9343L28.1919 22.3575L28.1931 22.1969L28.1942 22.0363L32.7699 17.5262L32.8718 17.5853L38.2319 20.6821C39.7622 21.5665 39.7519 22.9954 38.2089 23.8588L32.8047 26.8778L32.7009 26.9343Z" fill="url(#paint1_linear_825_21267)"/>
+        <g filter="url(#filter1_i_825_21267)">
+            <path d="M32.8049 26.8768L28.1922 22.1969L14.3854 35.8068C14.8875 36.3473 15.7241 36.4193 16.6706 35.8915L32.8049 26.8768Z" fill="url(#paint2_linear_825_21267)"/>
+        </g>
+        <path d="M32.8719 17.5842L16.8695 8.33833C15.9307 7.79584 15.0931 7.85689 14.5833 8.39002L28.1932 22.198L32.8719 17.5842Z" fill="url(#paint3_linear_825_21267)"/>
+    </g>
+    <defs>
+        <filter id="filter0_ii_825_21267" x="13.8872" y="7.95972" width="25.4858" height="28.2922" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="-0.15"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+            <feBlend mode="normal" in2="shape" result="effect1_innerShadow_825_21267"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="0.15"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+            <feBlend mode="normal" in2="effect1_innerShadow_825_21267" result="effect2_innerShadow_825_21267"/>
+        </filter>
+        <filter id="filter1_i_825_21267" x="14.3853" y="22.1969" width="18.4199" height="14.0551" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="-0.15"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
+            <feBlend mode="normal" in2="shape" result="effect1_innerShadow_825_21267"/>
+        </filter>
+        <linearGradient id="paint0_linear_825_21267" x1="27.0751" y1="9.76727" x2="8.48201" y2="28.0937" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#00A0FF"/>
+            <stop offset="0.0066" stop-color="#00A1FF"/>
+            <stop offset="0.2601" stop-color="#00BEFF"/>
+            <stop offset="0.5122" stop-color="#00D2FF"/>
+            <stop offset="0.7604" stop-color="#00DFFF"/>
+            <stop offset="1" stop-color="#00E3FF"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_825_21267" x1="40.2207" y1="22.2838" x2="13.6059" y2="22.0915" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FFE000"/>
+            <stop offset="0.4087" stop-color="#FFBD00"/>
+            <stop offset="0.7754" stop-color="#FFA500"/>
+            <stop offset="1" stop-color="#FF9C00"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_825_21267" x1="30.297" y1="24.7355" x2="5.08254" y2="49.5884" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FF3A44"/>
+            <stop offset="1" stop-color="#C31162"/>
+        </linearGradient>
+        <linearGradient id="paint3_linear_825_21267" x1="11.1894" y1="0.266874" x2="22.2869" y2="11.5259" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#32A071"/>
+            <stop offset="0.0685" stop-color="#2DA771"/>
+            <stop offset="0.4762" stop-color="#15CF74"/>
+            <stop offset="0.8009" stop-color="#06E775"/>
+            <stop offset="1" stop-color="#00F076"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/templates/ui/icons/header/code.html b/templates/ui/icons/header/code.html
new file mode 100644
index 00000000..d8f608cd
--- /dev/null
+++ b/templates/ui/icons/header/code.html
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="83" height="83" viewBox="0 0 83 83" fill="none">
+    <g clip-path="url(#clip0_917_2389)">
+        <path d="M32.7476 58.1651C32.434 58.1651 32.1182 58.0573 31.8605 57.8378L22.9935 50.2875C22.6876 50.0268 22.5117 49.646 22.5117 49.2438C22.5117 48.8423 22.6884 48.4615 22.9935 48.2008L31.8605 40.6504C32.4363 40.1595 33.3012 40.2291 33.7921 40.8049C34.2822 41.3815 34.2134 42.2463 33.6369 42.7364L25.9955 49.2438L33.6369 55.7511C34.2134 56.242 34.2822 57.1068 33.7921 57.6826C33.5206 58.0015 33.1352 58.1651 32.7476 58.1651Z" fill="#006031"/>
+        <path d="M50.2523 58.1651C49.8646 58.1651 49.4792 58.0015 49.2085 57.6826C48.7176 57.1068 48.7872 56.242 49.363 55.7511L57.0043 49.2438L49.363 42.7364C48.7872 42.2463 48.7176 41.3815 49.2085 40.8049C49.6987 40.2291 50.5643 40.1595 51.1393 40.6504L60.0064 48.2008C60.3123 48.4615 60.4881 48.8423 60.4881 49.2438C60.4881 49.646 60.3123 50.0268 60.0064 50.2875L51.1393 57.8378C50.8816 58.0573 50.5658 58.1651 50.2523 58.1651Z" fill="#006031"/>
+        <path d="M38.3612 63.8282C38.2672 63.8282 38.1723 63.8183 38.0768 63.7984C37.3366 63.6424 36.8625 62.9152 37.0185 62.175L42.5447 35.937C42.7007 35.1968 43.4271 34.7227 44.1681 34.8787C44.9083 35.0347 45.3824 35.7611 45.2264 36.5021L39.7002 62.7401C39.564 63.3855 38.9951 63.8282 38.3612 63.8282Z" fill="#006031"/>
+        <path d="M73.7995 78.123H9.20047C4.12767 78.123 0 73.9961 0 68.9225V14.0944C0 9.02159 4.12767 4.89392 9.20047 4.89392H73.7995C78.8723 4.89392 83 9.02159 83 14.0944V68.9225C83 73.9961 78.8723 78.123 73.7995 78.123ZM9.20047 7.63449C5.63865 7.63449 2.74057 10.5326 2.74057 14.0944V68.9225C2.74057 72.4844 5.63865 75.3824 9.20047 75.3824H73.7995C77.3614 75.3824 80.2594 72.4844 80.2594 68.9225V14.0944C80.2594 10.5326 77.3614 7.63449 73.7995 7.63449H9.20047Z" fill="#006031"/>
+        <path d="M81.6297 26.836H1.37028C0.613263 26.836 0 26.2228 0 25.4657C0 24.7095 0.613263 24.0955 1.37028 24.0955H81.6297C82.3867 24.0955 83 24.7095 83 25.4657C83 26.2228 82.3867 26.836 81.6297 26.836Z" fill="#006031"/>
+        <path d="M23.4126 20.2789C21.0222 20.2789 19.0762 18.3329 19.0762 15.9425C19.0762 13.5514 21.0222 11.6061 23.4126 11.6061C25.8037 11.6061 27.749 13.5514 27.749 15.9425C27.749 18.3329 25.8037 20.2789 23.4126 20.2789ZM23.4126 14.3466C22.5332 14.3466 21.8167 15.0624 21.8167 15.9425C21.8167 16.8226 22.5332 17.5384 23.4126 17.5384C24.2927 17.5384 25.0085 16.8226 25.0085 15.9425C25.0085 15.0624 24.2927 14.3466 23.4126 14.3466Z" fill="#006031"/>
+        <path d="M10.0889 20.2369C7.69775 20.2369 5.75244 18.2916 5.75244 15.9005C5.75244 13.5094 7.69775 11.5641 10.0889 11.5641C12.48 11.5641 14.4253 13.5094 14.4253 15.9005C14.4253 18.2916 12.48 20.2369 10.0889 20.2369ZM10.0889 14.3047C9.2095 14.3047 8.49301 15.0211 8.49301 15.9005C8.49301 16.7806 9.2095 17.4964 10.0889 17.4964C10.969 17.4964 11.6847 16.7806 11.6847 15.9005C11.6847 15.0211 10.969 14.3047 10.0889 14.3047Z" fill="#006031"/>
+        <path d="M36.7361 20.3203C34.3457 20.3203 32.4004 18.375 32.4004 15.9839C32.4004 13.5935 34.3457 11.6482 36.7361 11.6482C39.1272 11.6482 41.0725 13.5935 41.0725 15.9839C41.0725 18.375 39.1272 20.3203 36.7361 20.3203ZM36.7361 14.388C35.8567 14.388 35.141 15.1037 35.141 15.9839C35.141 16.864 35.8567 17.5797 36.7361 17.5797C37.6162 17.5797 38.3319 16.864 38.3319 15.9839C38.3319 15.1037 37.6162 14.388 36.7361 14.388Z" fill="#006031"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_917_2389">
+            <rect width="83" height="83" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/templates/ui/icons/header/donate.html b/templates/ui/icons/header/donate.html
new file mode 100644
index 00000000..909ba971
--- /dev/null
+++ b/templates/ui/icons/header/donate.html
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="61" height="83" viewBox="0 0 61 83" fill="none">
+    <g clip-path="url(#clip0_917_2365)">
+        <mask id="mask0_917_2365" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-11" y="0" width="83" height="83">
+            <path d="M-11 7.62939e-06H72V83H-11V7.62939e-06Z" fill="white"/>
+        </mask>
+        <g mask="url(#mask0_917_2365)">
+            <path d="M42.4877 19.1967C42.4877 25.8169 37.1209 31.1837 30.5005 31.1837C23.8801 31.1837 18.5132 25.8169 18.5132 19.1967C18.5132 12.5763 23.8801 7.20952 30.5005 7.20952C37.1209 7.20952 42.4877 12.5763 42.4877 19.1967Z" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M27.231 24.1005H31.3176C32.6718 24.1005 33.7695 23.0028 33.7695 21.6486C33.7695 20.2943 32.6718 19.1967 31.3176 19.1967H29.6829C28.3286 19.1967 27.231 18.0989 27.231 16.7446C27.231 15.3905 28.3286 14.2927 29.6829 14.2927H33.7695" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M30.5 11.857V14.3132" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M30.5 24.1393V26.5956" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M60.6328 42.6447H0.367676V31.1811H60.6328V42.6447Z" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M4.00262 43H4H56.9974H57" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M56.9928 43L57.0005 82H4.00754L4.00049 43" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M41.741 54.2494C39.1829 51.6913 35.0353 51.6913 32.4771 54.2494L30.5118 56.2146L28.5466 54.2494C25.9885 51.6913 21.8409 51.6913 19.2828 54.2494C16.7247 56.8075 16.7247 60.9552 19.2828 63.5133L30.5118 74.7424L41.741 63.5133C44.2991 60.9552 44.2991 56.8075 41.741 54.2494Z" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M17.0497 31.1296C14.2312 27.9551 12.5195 23.7757 12.5195 19.1968C12.5195 9.26611 20.5699 1.21592 30.5004 1.21592C40.4307 1.21592 48.4812 9.26611 48.4812 19.1968C48.4812 23.7747 46.7702 27.9533 43.9527 31.1275" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+        </g>
+    </g>
+    <defs>
+        <clipPath id="clip0_917_2365">
+            <rect width="61" height="83" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/templates/ui/icons/header/location.html b/templates/ui/icons/header/location.html
new file mode 100644
index 00000000..a61d35f1
--- /dev/null
+++ b/templates/ui/icons/header/location.html
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63" height="83" viewBox="0 0 63 83" fill="none">
+    <g clip-path="url(#clip0_917_2398)">
+        <mask id="mask0_917_2398" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-10" y="0" width="83" height="83">
+            <path d="M73 7.62939e-06H-9.99999V83H73V7.62939e-06Z" fill="white"/>
+        </mask>
+        <g mask="url(#mask0_917_2398)">
+            <path d="M55.8164 81.3789H7.18359" stroke="#006031" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M31.5 43.7695C38.6506 43.7695 44.4688 37.9514 44.4688 30.8008C44.4688 23.6501 38.6506 17.832 31.5 17.832C24.3494 17.832 18.5313 23.6501 18.5313 30.8008C18.5313 37.9514 24.3494 43.7695 31.5 43.7695Z" stroke="#006031" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M12.5242 54.5L31.5 81.3788L54.8583 48.2923C58.5139 43.4178 60.6797 37.3628 60.6797 30.8007C60.6797 14.6854 47.6153 1.62097 31.5 1.62097C15.3847 1.62097 2.32031 14.6854 2.32031 30.8007C2.32031 37.3628 4.48626 43.4178 8.14166 48.2923L12.8184 54.9167" stroke="#006031" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+        </g>
+    </g>
+    <defs>
+        <clipPath id="clip0_917_2398">
+            <rect width="63" height="83" fill="white" transform="matrix(-1 0 0 1 63 0)"/>
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file