chore: Merge branch dev to main (#272)

2025-05-11 20:04:25 +02:00 · 2025-05-04 04:06:20 +03:00 · 2025-05-04 04:06:20 +03:00 · a01d3f9d84
commit a01d3f9d84
parent e9e54ce0b3 bdec31ac6e
52 changed files with 1591 additions and 839 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@ -0,0 +1,109 @@
+name: 🐞 Bug report
+description: Report a bug or an issue.
+title: 'bug: '
+labels: ['Bug report']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        <p align="center">
+          <picture>
+            <source
+              width="256px"
+              media="(prefers-color-scheme: dark)"
+              srcset="https://raw.githubusercontent.com/revanced/revanced-website/main/assets/revanced-headline/revanced-headline-vertical-dark.svg"
+            >
+            <img 
+              width="256px"
+              src="https://raw.githubusercontent.com/revanced/revanced-website/main/assets/revanced-headline/revanced-headline-vertical-light.svg"
+            >
+          </picture>
+          <br>
+          <a href="https://revanced.app/">
+             <picture>
+                 <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/revanced/revanced-website/main/assets/revanced-logo/revanced-logo.svg" />
+                 <img height="24px" src="https://raw.githubusercontent.com/revanced/revanced-website/main/assets/revanced-logo/revanced-logo.svg" />
+             </picture>
+           </a>&nbsp;&nbsp;&nbsp;
+           <a href="https://github.com/ReVanced">
+               <picture>
+                   <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://i.ibb.co/dMMmCrW/Git-Hub-Mark.png" />
+                   <img height="24px" src="https://i.ibb.co/9wV3HGF/Git-Hub-Mark-Light.png" />
+               </picture>
+           </a>&nbsp;&nbsp;&nbsp;
+           <a href="http://revanced.app/discord">
+               <picture>
+                   <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032563-d4e084b7-244e-4358-af50-26bde6dd4996.png" />
+                   <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032563-d4e084b7-244e-4358-af50-26bde6dd4996.png" />
+               </picture>
+           </a>&nbsp;&nbsp;&nbsp;
+           <a href="https://reddit.com/r/revancedapp">
+               <picture>
+                   <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032351-9d9d5619-8ef7-470a-9eec-2744ece54553.png" />
+                   <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032351-9d9d5619-8ef7-470a-9eec-2744ece54553.png" />
+               </picture>
+           </a>&nbsp;&nbsp;&nbsp;
+           <a href="https://t.me/app_revanced">
+              <picture>
+                 <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032213-faf25ab8-0bc3-4a94-a730-b524c96df124.png" />
+                 <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032213-faf25ab8-0bc3-4a94-a730-b524c96df124.png" />
+              </picture>
+           </a>&nbsp;&nbsp;&nbsp;
+           <a href="https://x.com/revancedapp">
+              <picture>
+                 <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/93124920/270180600-7c1b38bf-889b-4d68-bd5e-b9d86f91421a.png">
+                 <img height="24px" src="https://user-images.githubusercontent.com/93124920/270108715-d80743fa-b330-4809-b1e6-79fbdc60d09c.png" />
+              </picture>
+           </a>&nbsp;&nbsp;&nbsp;
+           <a href="https://www.youtube.com/@ReVanced">
+              <picture>
+                 <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032714-c51c7492-0666-44ac-99c2-f003a695ab50.png" />
+                 <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032714-c51c7492-0666-44ac-99c2-f003a695ab50.png" />
+             </picture>
+           </a>
+           <br>
+           <br>
+           Continuing the legacy of Vanced
+        </p>
+
+        # ReVanced Website bug report
+
+        Before creating a new bug report, please keep the following in mind:
+
+        - **Do not submit a duplicate bug report**: Search for existing bug reports [here](https://github.com/ReVanced/revanced-website/issues?q=label%3A%22Bug+report%22).
+        - **Review the contribution guidelines**: Make sure your bug report adheres to it. You can find the guidelines [here](https://github.com/ReVanced/revanced-website/blob/main/CONTRIBUTING.md).
+        - **Do not use the issue page for support**: If you need help or have questions, check out other platforms on [revanced.app](https://revanced.app).
+  - type: textarea
+    attributes:
+      label: Bug description
+      description: |
+        - Describe your bug in detail
+        - Add steps to reproduce the bug if possible (Step 1. ... Step 2. ...)
+        - Add images and videos if possible
+    validations:
+        required: true
+  - type: textarea
+    attributes:
+      label: Error logs
+      description: Exceptions that unexpectedly happened during the development or production status of the website.
+      render: shell
+  - type: textarea
+    attributes:
+      label: Solution
+      description: If applicable, add a possible solution to the bug.
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: Add additional context here.
+  - type: checkboxes
+    id: acknowledgements
+    attributes:
+      label: Acknowledgements
+      description: Your bug report will be closed if you don't follow the checklist below.
+      options:
+        - label: I have checked all open and closed bug reports and this is not a duplicate.
+          required: true
+        - label: I have chosen an appropriate title.
+          required: true
+        - label: All requested information has been provided properly.
+          required: true
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: 🗨 Discussions
+    url: https://github.com/revanced/revanced-suggestions/discussions
+    about: Have something unspecific to ReVanced Website in mind? Search for or start a new discussion!
--- a/.github/ISSUE_TEMPLATE/feature_request.yml
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@ -0,0 +1,105 @@
+name: ⭐ Feature request
+description: Create a detailed request for a new feature.
+title: 'feat: '
+labels: ['Feature request']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        <p align="center">
+          <picture>
+            <source
+              width="256px"
+              media="(prefers-color-scheme: dark)"
+              srcset="https://raw.githubusercontent.com/revanced/revanced-website/main/assets/revanced-headline/revanced-headline-vertical-dark.svg"
+            >
+            <img 
+              width="256px"
+              src="https://raw.githubusercontent.com/revanced/revanced-website/main/assets/revanced-headline/revanced-headline-vertical-light.svg"
+            >
+          </picture>
+          <br>
+          <a href="https://revanced.app/">
+             <picture>
+                 <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/revanced/revanced-website/main/assets/revanced-logo/revanced-logo.svg" />
+                 <img height="24px" src="https://raw.githubusercontent.com/revanced/revanced-website/main/assets/revanced-logo/revanced-logo.svg" />
+             </picture>
+           </a>&nbsp;&nbsp;&nbsp;
+           <a href="https://github.com/ReVanced">
+               <picture>
+                   <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://i.ibb.co/dMMmCrW/Git-Hub-Mark.png" />
+                   <img height="24px" src="https://i.ibb.co/9wV3HGF/Git-Hub-Mark-Light.png" />
+               </picture>
+           </a>&nbsp;&nbsp;&nbsp;
+           <a href="http://revanced.app/discord">
+               <picture>
+                   <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032563-d4e084b7-244e-4358-af50-26bde6dd4996.png" />
+                   <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032563-d4e084b7-244e-4358-af50-26bde6dd4996.png" />
+               </picture>
+           </a>&nbsp;&nbsp;&nbsp;
+           <a href="https://reddit.com/r/revancedapp">
+               <picture>
+                   <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032351-9d9d5619-8ef7-470a-9eec-2744ece54553.png" />
+                   <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032351-9d9d5619-8ef7-470a-9eec-2744ece54553.png" />
+               </picture>
+           </a>&nbsp;&nbsp;&nbsp;
+           <a href="https://t.me/app_revanced">
+              <picture>
+                 <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032213-faf25ab8-0bc3-4a94-a730-b524c96df124.png" />
+                 <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032213-faf25ab8-0bc3-4a94-a730-b524c96df124.png" />
+              </picture>
+           </a>&nbsp;&nbsp;&nbsp;
+           <a href="https://x.com/revancedapp">
+              <picture>
+                 <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/93124920/270180600-7c1b38bf-889b-4d68-bd5e-b9d86f91421a.png">
+                 <img height="24px" src="https://user-images.githubusercontent.com/93124920/270108715-d80743fa-b330-4809-b1e6-79fbdc60d09c.png" />
+              </picture>
+           </a>&nbsp;&nbsp;&nbsp;
+           <a href="https://www.youtube.com/@ReVanced">
+              <picture>
+                 <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032714-c51c7492-0666-44ac-99c2-f003a695ab50.png" />
+                 <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032714-c51c7492-0666-44ac-99c2-f003a695ab50.png" />
+             </picture>
+           </a>
+           <br>
+           <br>
+           Continuing the legacy of Vanced
+        </p>
+
+        # ReVanced Website feature request
+
+        Before creating a new feature request, please keep the following in mind:
+
+        - **Do not submit a duplicate feature request**: Search for existing feature requests [here](https://github.com/ReVanced/revanced-website/issues?q=label%3A%22Feature+request%22).
+        - **Review the contribution guidelines**: Make sure your feature request adheres to it. You can find the guidelines [here](https://github.com/ReVanced/revanced-website/blob/main/CONTRIBUTING.md).
+        - **Do not use the issue page for support**: If you need help or have questions, check out other platforms on [revanced.app](https://revanced.app).
+  - type: textarea
+    attributes:
+      label: Feature description
+      description: |
+        - Describe your feature in detail
+        - Add images, videos, links, examples, references, etc. if possible
+  - type: textarea
+    attributes:
+      label: Motivation
+      description: | 
+        A strong motivation is necessary for a feature request to be considered.
+        
+        - Why should this feature be implemented? 
+        - What is the explicit use case?
+        - What are the benefits?
+        - What makes this feature important?
+    validations:
+      required: true
+  - type: checkboxes
+    id: acknowledgements
+    attributes:
+      label: Acknowledgements
+      description: Your feature request will be closed if you don't follow the checklist below.
+      options:
+        - label: I have checked all open and closed feature requests and this is not a duplicate
+          required: true
+        - label: I have chosen an appropriate title.
+          required: true
+        - label: All requested information has been provided properly.
+          required: true
--- a/.github/config.yml
+++ b/.github/config.yml
@ -0,0 +1,2 @@
+firstPRMergeComment: >
+  Thank you for contributing to ReVanced. Join us on [Discord](https://revanced.app/discord) to receive a role for your contribution.
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -0,0 +1,8 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    labels: []
+    directory: /
+    target-branch: dev
+    schedule:
+      interval: monthly
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@ -21,26 +21,31 @@ jobs:
      - name: Checkout
        uses: actions/checkout@v4

+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: npm
+
+      - name: Install dependencies
+        run: npm i
+
      - name: Build
        env:
          RV_API_URL: ${{ vars.RV_API_URL }}
          RV_GOOGLE_TAG_MANAGER_ID: ${{ vars.RV_GOOGLE_TAG_MANAGER_ID }}
          RV_DMCA_GUID: ${{ vars.RV_DMCA_GUID }}
-        run: |
-          npm i
-          npm run build
+        run: npm run build

      - name: Deploy
+        id: deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy public --project-name=revanced-website
-        id: deploy

      - name: Comment deployment URL
        if: ${{ github.event_name == 'pull_request' }}
        uses: thollander/actions-comment-pull-request@v2
        with:
-          GITHUB_TOKEN: ${{ secrets.PULL_REQUESTS_WRITE }}
-          message: Deployed at ${{ steps.deploy.outputs.pages-deployment-alias-url }}.
+          message: Deployed at ${{ steps.deploy.outputs.deployment-url }}.
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -0,0 +1,97 @@
+<p align="center">
+  <picture>
+    <source
+      width="256px"
+      media="(prefers-color-scheme: dark)"
+      srcset="assets/revanced-headline/revanced-headline-vertical-dark.svg"
+    >
+    <img
+      width="256px"
+      src="assets/revanced-headline/revanced-headline-vertical-light.svg"
+    >
+  </picture>
+  <br>
+  <a href="https://revanced.app/">
+       <picture>
+           <source height="24px" media="(prefers-color-scheme: dark)" srcset="assets/revanced-logo/revanced-logo.svg" />
+           <img height="24px" src="assets/revanced-logo/revanced-logo.svg" />
+       </picture>
+   </a>&nbsp;&nbsp;&nbsp;
+   <a href="https://github.com/ReVanced">
+       <picture>
+           <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://i.ibb.co/dMMmCrW/Git-Hub-Mark.png" />
+           <img height="24px" src="https://i.ibb.co/9wV3HGF/Git-Hub-Mark-Light.png" />
+       </picture>
+   </a>&nbsp;&nbsp;&nbsp;
+   <a href="http://revanced.app/discord">
+       <picture>
+           <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032563-d4e084b7-244e-4358-af50-26bde6dd4996.png" />
+           <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032563-d4e084b7-244e-4358-af50-26bde6dd4996.png" />
+       </picture>
+   </a>&nbsp;&nbsp;&nbsp;
+   <a href="https://reddit.com/r/revancedapp">
+       <picture>
+           <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032351-9d9d5619-8ef7-470a-9eec-2744ece54553.png" />
+           <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032351-9d9d5619-8ef7-470a-9eec-2744ece54553.png" />
+       </picture>
+   </a>&nbsp;&nbsp;&nbsp;
+   <a href="https://t.me/app_revanced">
+      <picture>
+         <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032213-faf25ab8-0bc3-4a94-a730-b524c96df124.png" />
+         <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032213-faf25ab8-0bc3-4a94-a730-b524c96df124.png" />
+      </picture>
+   </a>&nbsp;&nbsp;&nbsp;
+   <a href="https://x.com/revancedapp">
+      <picture>
+         <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/93124920/270180600-7c1b38bf-889b-4d68-bd5e-b9d86f91421a.png">
+         <img height="24px" src="https://user-images.githubusercontent.com/93124920/270108715-d80743fa-b330-4809-b1e6-79fbdc60d09c.png" />
+      </picture>
+   </a>&nbsp;&nbsp;&nbsp;
+   <a href="https://www.youtube.com/@ReVanced">
+      <picture>
+         <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032714-c51c7492-0666-44ac-99c2-f003a695ab50.png" />
+         <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032714-c51c7492-0666-44ac-99c2-f003a695ab50.png" />
+     </picture>
+   </a>
+   <br>
+   <br>
+   Continuing the legacy of Vanced
+</p>
+
+# 👋 Contribution guidelines
+
+This document describes how to contribute to ReVanced Website.
+
+## 📖 Resources to help you get started
+
+* Our [backlog](https://github.com/orgs/ReVanced/projects/12) is where we keep track of what we're working on
+* [Issues](https://github.com/ReVanced/revanced-website/issues) are where we keep track of bugs and feature requests
+
+## 🙏 Submitting a feature request
+
+Features can be requested by opening an issue using the
+[feature request issue template](https://github.com/ReVanced/revanced-website/issues/new?assignees=&labels=feature-request&projects=&template=feature-issue.yml&title=feat%3A+%3Ctitle%3E).
+
+> [!NOTE]
+> Requests can be accepted or rejected at the discretion of maintainers of ReVanced Website.
+> Good motivation has to be provided for a request to be accepted.
+
+## 🐞 Submitting a bug report
+
+If you encounter a bug while using the ReVanced Website, open an issue using the
+[bug report issue template](https://github.com/ReVanced/revanced-website/issues/new?assignees=&labels=bug&projects=&template=bug-issue.yml&title=bug%3A+%3Ctitle%3E).
+
+## 📝 How to contribute
+
+1. Before contributing, it is recommended to open an issue to discuss your change
+with the maintainers of ReVanced Website. This will help you determine whether your change is acceptable
+and whether it is worth your time to implement it
+2. Development happens on the `dev` branch. Fork the repository and create your branch from `dev`
+3. Commit your changes
+4. Submit a pull request to the `dev` branch of the repository and reference issues
+that your pull request closes in the description of your pull request
+5. Our team will review your pull request and provide feedback. Once your pull request is approved,
+it will be merged into the `dev` branch and will be included in the next release of ReVanced Website
+
+❤️ Thank you for considering contributing to ReVanced Website,
+ReVanced
--- a/README.md
+++ b/README.md
@ -1,26 +1,108 @@
-# ReVanced Website
+<p align="center">
+  <picture>
+    <source
+      width="256px"
+      media="(prefers-color-scheme: dark)"
+      srcset="assets/revanced-headline/revanced-headline-vertical-dark.svg"
+    >
+    <img 
+      width="256px"
+      src="assets/revanced-headline/revanced-headline-vertical-light.svg"
+    >
+  </picture>
+  <br>
+  <a href="https://revanced.app/">
+     <picture>
+         <source height="24px" media="(prefers-color-scheme: dark)" srcset="assets/revanced-logo/revanced-logo.svg" />
+         <img height="24px" src="assets/revanced-logo/revanced-logo.svg" />
+     </picture>
+   </a>&nbsp;&nbsp;&nbsp;
+   <a href="https://github.com/ReVanced">
+       <picture>
+           <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://i.ibb.co/dMMmCrW/Git-Hub-Mark.png" />
+           <img height="24px" src="https://i.ibb.co/9wV3HGF/Git-Hub-Mark-Light.png" />
+       </picture>
+   </a>&nbsp;&nbsp;&nbsp;
+   <a href="http://revanced.app/discord">
+       <picture>
+           <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032563-d4e084b7-244e-4358-af50-26bde6dd4996.png" />
+           <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032563-d4e084b7-244e-4358-af50-26bde6dd4996.png" />
+       </picture>
+   </a>&nbsp;&nbsp;&nbsp;
+   <a href="https://reddit.com/r/revancedapp">
+       <picture>
+           <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032351-9d9d5619-8ef7-470a-9eec-2744ece54553.png" />
+           <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032351-9d9d5619-8ef7-470a-9eec-2744ece54553.png" />
+       </picture>
+   </a>&nbsp;&nbsp;&nbsp;
+   <a href="https://t.me/app_revanced">
+      <picture>
+         <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032213-faf25ab8-0bc3-4a94-a730-b524c96df124.png" />
+         <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032213-faf25ab8-0bc3-4a94-a730-b524c96df124.png" />
+      </picture>
+   </a>&nbsp;&nbsp;&nbsp;
+   <a href="https://x.com/revancedapp">
+      <picture>
+         <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/93124920/270180600-7c1b38bf-889b-4d68-bd5e-b9d86f91421a.png">
+         <img height="24px" src="https://user-images.githubusercontent.com/93124920/270108715-d80743fa-b330-4809-b1e6-79fbdc60d09c.png" />
+      </picture>
+   </a>&nbsp;&nbsp;&nbsp;
+   <a href="https://www.youtube.com/@ReVanced">
+      <picture>
+         <source height="24px" media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/13122796/178032714-c51c7492-0666-44ac-99c2-f003a695ab50.png" />
+         <img height="24px" src="https://user-images.githubusercontent.com/13122796/178032714-c51c7492-0666-44ac-99c2-f003a695ab50.png" />
+     </picture>
+   </a>
+   <br>
+   <br>
+   Continuing the legacy of Vanced
+</p>

-The official ReVanced Website.
+# 🌐 ReVanced Website

-## Developing
+![Deployment status](https://img.shields.io/github/actions/workflow/status/ReVanced/revanced-website/deploy.yml)
+![GPLv3 License](https://img.shields.io/badge/License-GPL%20v3-yellow.svg)

-Install dependencies with `npm install` (or `pnpm install`).
+This repository contains the source code of ReVanced Website.

-Start a development server by running:
+## ❓ About

-```bash
-npm run dev
+ReVanced Website is the front page of ReVanced.
+It is built using Svelte and uses [ReVanced API](https://github.com/ReVanced/revanced-api) as a data source.

-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
+## 💪 Features

-## Building
+Discover what the ReVanced Website offers:  

-To create a production build, run:
+- 👥 **View contributors:** Explore the people who make this project possible.
+- 🔧 **Browse first-party patches:** Access a comprehensive list of official ReVanced Patches.
+- ❤️ **Explore donation options:** Find ways to support the project through donations.  
+- 🌐 **Connect with the community:** Follow us on social media and stay updated.
+- 🔽 **Get ReVanced Manager:** Download the latest version of ReVanced Manager with ease.  

-```bash
-npm run build
-```
+## 🚀 How to get started

-You can preview the production build with `npm run preview`.
+ReVanced Website can be deployed locally using `npm run dev` or preview the build using `npm run preview`.
+
+## 📚 Everything else
+
+### 📙 Contributing
+
+Thank you for considering contributing to ReVanced Website. You can find the contribution guidelines [here](CONTRIBUTING.md).
+
+### 🛠️ Building
+
+To build ReVanced Website, [Node.js](https://nodejs.org/en/download) and Git must be installed.  
+Follow the steps below to build ReVanced Website:
+
+1. Run `git clone git@github.com:ReVanced/revanced-website.git` to clone the repository
+2. Create `.env` file based on [`.env.example`](.env.example)
+3. Run `npm i` to install the dependencies
+4. Run `npm run build` to build the project
+
+## 📜 Licence
+
+ReVanced Website is licensed under the GPLv3 license. Please see the [license file](LICENSE) for more information.
+[tl;dr](https://www.tldrlegal.com/license/gnu-general-public-license-v3-gpl-3) you may copy, distribute and modify ReVanced Website as long as you track changes/dates in source files.
+Any modifications to ReVanced Website must also be made available under the GPL,
+along with build & install instructions.
--- a/assets/revanced-headline/revanced-headline-vertical-dark.svg
+++ b/assets/revanced-headline/revanced-headline-vertical-dark.svg
--- a/assets/revanced-headline/revanced-headline-vertical-light.svg
+++ b/assets/revanced-headline/revanced-headline-vertical-light.svg
--- a/assets/revanced-logo/revanced-logo.svg
+++ b/assets/revanced-logo/revanced-logo.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="Logo"><g id="Ring"><circle id="Ring-Background" serif:id="Ring Background" cx="400" cy="400" r="400" style="fill:#1b1b1b;"/><path id="Ring1" serif:id="Ring" d="M400,0c220.766,0 400,179.234 400,400c-0,220.766 -179.234,400 -400,400c-220.766,-0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-0,36c200.897,-0 364,163.103 364,364c0,200.897 -163.103,364 -364,364c-200.897,0 -364,-163.103 -364,-364c-0,-200.897 163.103,-364 364,-364Z" style="fill:url(#_Linear1);"/></g><g id="Shape"><path id="V-Shape" serif:id="V Shape" d="M538.74,269.872c1.481,-3.382 1.157,-7.283 -0.863,-10.373c-2.021,-3.091 -5.464,-4.954 -9.156,-4.954c-5.148,0 -10.435,0 -14.165,0c-3.1,0 -5.907,1.834 -7.153,4.672c-12.468,28.396 -78.273,178.273 -100.25,228.328c-1.246,2.838 -4.053,4.671 -7.154,4.671c-3.1,0 -5.907,-1.833 -7.153,-4.671c-21.977,-50.055 -87.782,-199.932 -100.25,-228.328c-1.246,-2.838 -4.053,-4.672 -7.153,-4.672c-3.73,0 -9.017,0 -14.164,0c-3.693,0 -7.135,1.863 -9.156,4.954c-2.02,3.09 -2.344,6.991 -0.863,10.373c23.557,53.766 101.872,232.519 117.871,269.034c1.743,3.979 5.674,6.549 10.018,6.549c6.293,-0 15.408,-0 21.701,-0c4.344,-0 8.275,-2.57 10.018,-6.549c15.999,-36.515 94.315,-215.268 117.872,-269.034Z" style="fill:#fff;"/><path id="Diamond" d="M408.119,395.312c-1.675,2.901 -4.77,4.688 -8.119,4.688c-3.349,-0 -6.444,-1.787 -8.119,-4.688c-16.997,-29.44 -56.156,-97.264 -73.153,-126.704c-1.675,-2.901 -1.675,-6.474 0,-9.375c1.675,-2.901 4.77,-4.688 8.119,-4.688c33.995,0 112.311,0 146.306,0c3.349,0 6.444,1.787 8.119,4.688c1.675,2.901 1.675,6.474 -0,9.375c-16.997,29.44 -56.156,97.264 -73.153,126.704Z" style="fill:url(#_Linear2);"/></g></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.89859e-14,800,-800,4.89859e-14,400.001,3.31681e-10)"><stop offset="0" style="stop-color:#f04e98;stop-opacity:1"/><stop offset="0.5" style="stop-color:#5f65d4;stop-opacity:1"/><stop offset="1" style="stop-color:#4e98f0;stop-opacity:1"/></linearGradient><linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.77155e-14,289.317,-282.535,1.73003e-14,400,254.545)"><stop offset="0" style="stop-color:#f04e98;stop-opacity:1"/><stop offset="0.5" style="stop-color:#5f65d4;stop-opacity:1"/><stop offset="1" style="stop-color:#4e98f0;stop-opacity:1"/></linearGradient></defs></svg>
--- a/package-lock.json
+++ b/package-lock.json
@ -12,7 +12,8 @@
 				"@tanstack/query-persist-client-core": "^4.36.1",
 				"@tanstack/query-sync-storage-persister": "^4.36.1",
 				"@tanstack/svelte-query": "^4.36.1",
-				"datetrigger": "^1.1.1"
+				"datetrigger": "^1.1.1",
+				"svelte-material-icons": "^3.0.5"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-static": "3.0.6",
@ -29,7 +30,6 @@
 				"prettier-plugin-svelte": "3.3.2",
 				"qrious": "^4.0.2",
 				"sass": "1.81.0",
-				"semver": "7.6.3",
 				"sirv-cli": "3.0.0",
 				"svelte": "4.2.18",
 				"svelte-check": "4.1.0",
@ -4285,6 +4285,15 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-material-icons": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/svelte-material-icons/-/svelte-material-icons-3.0.5.tgz",
+			"integrity": "sha512-UbhAa+Btd5y6e6DMljVccP+cbJ8lvesltMippiCOvfIUtYe2TsQqM+P6osfrVsZHV47b1tY6AmqCuSpMKnwMOQ==",
+			"license": "ISC",
+			"peerDependencies": {
+				"svelte": "^3.0.0 || ^4.0.0"
+			}
+		},
 		"node_modules/svelte-meta-tags": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/svelte-meta-tags/-/svelte-meta-tags-3.1.2.tgz",
--- a/package.json
+++ b/package.json
@ -28,7 +28,6 @@
 		"prettier-plugin-svelte": "3.3.2",
 		"qrious": "^4.0.2",
 		"sass": "1.81.0",
-		"semver": "7.6.3",
 		"sirv-cli": "3.0.0",
 		"svelte": "4.2.18",
 		"svelte-check": "4.1.0",
@ -46,6 +45,7 @@
 		"@tanstack/query-persist-client-core": "^4.36.1",
 		"@tanstack/query-sync-storage-persister": "^4.36.1",
 		"@tanstack/svelte-query": "^4.36.1",
-		"datetrigger": "^1.1.1"
+		"datetrigger": "^1.1.1",
+		"svelte-material-icons": "^3.0.5"
 	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app.html
+++ b/src/app.html
@ -1,26 +1,26 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta
-			name="robots"
-			content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
-		/>
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />

-		<!-- OpenGraph -->
-		<meta property="og:type" content="website" />
-		<meta property="og:image" content="/logo.png" />
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="/favicon.ico" />
+	<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />

-		<!-- Twitter -->
-		<meta name="twitter:image" itemprop="image" content="/logo.png" />
-		<meta name="twitter:card" content="summary" />
+	<!-- OpenGraph -->
+	<meta property="og:type" content="website" />
+	<meta property="og:image" content="/logo.png" />

-		%sveltekit.head%
-	</head>
-	<body>
-		<div>%sveltekit.body%</div>
-	</body>
-</html>
+	<!-- Twitter -->
+	<meta name="twitter:image" itemprop="image" content="/logo.png" />
+	<meta name="twitter:card" content="summary" />
+
+	%sveltekit.head%
+</head>
+
+<body>
+	<div>%sveltekit.body%</div>
+</body>
+
+</html>
--- a/src/app.scss
+++ b/src/app.scss
@ -34,7 +34,7 @@ body {
 .wrapper {
 	margin-inline: auto;
 	width: min(90%, 80rem);
-	margin-top: 7rem;
+	margin-top: 2.6rem;
 }

 :root {
@ -73,6 +73,9 @@ body {
 	--surface-nine: hsl(calc(var(--hue, 206) + 24), 9.5%, 17.5%);

 	--red-one: hsl(333, 84%, 62%);
+	--red-two: hsl(357, 74%, 60%);
+
+	--yellow-one: hsl(59, 100%, 72%);

 	--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 	--drop-shadow-one: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
--- a/src/data/api/index.ts
+++ b/src/data/api/index.ts
@ -74,6 +74,15 @@ async function about(): Promise<AboutData> {
 	return { about: json };
 }

+async function ping(): Promise<boolean> {
+	try {
+		const res = await fetch(`${settings.api_base_url()}/v4/ping`, { method: 'HEAD' });
+		return res.ok;
+	} catch (error) {
+		return false;
+	}
+}
+
 export const staleTime = 5 * 60 * 1000;
 export const queries = {
 	manager: {
@ -100,5 +109,10 @@ export const queries = {
 		queryKey: ['info'],
 		queryFn: about,
 		staleTime
+	},
+	ping: {
+		queryKey: ['ping'],
+		queryFn: ping,
+		staleTime
 	}
 };
--- a/src/data/api/settings.ts
+++ b/src/data/api/settings.ts
@ -4,21 +4,48 @@ import { RV_API_URL } from '$env/static/public';
 export const default_api_url = RV_API_URL;

 const URL_KEY = 'revanced_api_url';
+const STATUS_KEY = 'revanced_status_url';
+
+function set_status_url(apiUrl: string) {
+	fetch(`${apiUrl}/v4/about`)
+		.then((response) => (response.ok ? response.json() : null))
+		.then((data) => {
+			if (data?.status) {
+				localStorage.setItem(STATUS_KEY, data.status);
+				console.log('status is now ' + localStorage.getItem(STATUS_KEY));
+			}
+		});
+}

 // Get base URL
 export function api_base_url(): string {
 	if (browser) {
-		return localStorage.getItem(URL_KEY) || default_api_url;
+		const apiUrl = localStorage.getItem(URL_KEY) || default_api_url;
+
+		if (!localStorage.getItem(STATUS_KEY)) {
+			set_status_url(apiUrl);
+		}
+
+		return apiUrl;
 	}

 	return default_api_url;
 }

+export function status_url(): string | null {
+	if (browser) {
+		return localStorage.getItem(STATUS_KEY) || null;
+	}
+
+	return null;
+}
+
 // (re)set base URL.
 export function set_api_base_url(url?: string) {
 	if (!url) {
 		localStorage.removeItem(URL_KEY);
 	} else {
 		localStorage.setItem(URL_KEY, url);
+		set_status_url(url);
 	}
 }
--- a/src/layout/Footer/FooterHost.svelte
+++ b/src/layout/Footer/FooterHost.svelte
@ -11,6 +11,8 @@
 	import { RV_DMCA_GUID } from '$env/static/public';
 	import { onMount } from 'svelte';

+	export let showDivider = true;
+
 	const aboutQuery = createQuery(['about'], queries.about);

 	let location: string;
@ -22,22 +24,24 @@
 </script>

 <!-- squiggly divider line -->
-<svg
-	aria-hidden="true"
-	width="100%"
-	height="8"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
-	in:fly={{ y: 10, easing: quintOut, duration: 750 }}
->
-	<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
-		<path
-			d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
-			stroke-linecap="square"
-		/>
-	</pattern>
-	<rect width="100%" height="100%" fill="url(#a)" />
-</svg>
+{#if showDivider}
+	<svg
+		aria-hidden="true"
+		width="100%"
+		height="8"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		in:fly={{ y: 10, easing: quintOut, duration: 750 }}
+	>
+		<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
+			<path
+				d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
+				stroke-linecap="square"
+			/>
+		</pattern>
+		<rect width="100%" height="100%" fill="url(#a)" />
+	</svg>
+{/if}
 <footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 	<div class="footer-top">
 		<section class="main-content">
--- a/src/layout/Footer/FooterSection.svelte
+++ b/src/layout/Footer/FooterSection.svelte
@ -2,6 +2,8 @@
 	import { slide } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';

+	import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
+
 	export let title: string;
 	let expanded: boolean = false;
 </script>
@ -19,10 +21,9 @@
 		<span>
 			{title}
 		</span>
-		<img
-			src="/icons/{expanded ? 'expand_less' : 'expand_more'}.svg"
-			alt={expanded ? 'Close' : 'Expand'}
-		/>
+		<div class="arrow" style:transform={expanded ? 'rotate(180deg)' : 'rotate(0deg)'}>
+			<ChevronDown size="24px" color="var(--surface-six)" />
+		</div>
 	</button>
 	{#if expanded}
 		<ul transition:slide={{ easing: quintOut, duration: 500 }}>
@ -65,6 +66,11 @@
 		display: none;
 	}

+	.arrow {
+		transition: all 0.2s var(--bezier-one);
+		user-select: none;
+	}
+
 	@media screen and (max-width: 768px) {
 		.mobile-only {
 			display: block;
@ -73,8 +79,4 @@
 			display: none;
 		}
 	}
-
-	img {
-		height: 24px;
-	}
 </style>
--- a/src/layout/Hero/HeroImage.svelte
+++ b/src/layout/Hero/HeroImage.svelte
@ -27,7 +27,7 @@
 	}
 	@media (max-width: 1700px) {
 		.hero-img {
-			position: fixed;
+			position: absolute;
 			height: 100vh;
 			top: 115px;
 			right: 6rem;
--- a/src/layout/Hero/HeroSection.svelte
+++ b/src/layout/Hero/HeroSection.svelte
@ -1,5 +1,8 @@
 <script>
 	import Button from '$lib/components/Button.svelte';
+
+	import TrayArrowDown from 'svelte-material-icons/TrayArrowDown.svelte';
+	import FileDocumentOutline from 'svelte-material-icons/FileDocumentOutline.svelte';
 </script>

 <section class="hero">
@ -9,8 +12,8 @@
 			Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
 		</p>
 		<div class="hero-buttons">
-			<Button icon="download" type="filled" href="download">Download</Button>
-			<Button icon="docs" type="tonal" href="patches">View patches</Button>
+			<Button type="filled" icon={TrayArrowDown} href="download">Download</Button>
+			<Button type="tonal" icon={FileDocumentOutline} href="patches">View patches</Button>
 		</div>
 	</div>
 </section>
--- a/src/layout/Navbar/NavHost.svelte
+++ b/src/layout/Navbar/NavHost.svelte
@ -3,14 +3,20 @@
 	import { horizontalSlide } from '$util/horizontalSlide';
 	import { fade } from 'svelte/transition';
 	import { expoOut } from 'svelte/easing';
+	import { createQuery } from '@tanstack/svelte-query';

 	import Navigation from './NavButton.svelte';
-	import Svg from '$lib/components/Svg.svelte';
 	import Modal from '$lib/components/Dialogue.svelte';
 	import Button from '$lib/components/Button.svelte';
+	import Banner from '$lib/components/Banner.svelte';
+	import Query from '$lib/components/Query.svelte';

-	import { api_base_url, set_api_base_url, default_api_url } from '$data/api/settings';
+	import Cog from 'svelte-material-icons/Cog.svelte';
+	import Replay from 'svelte-material-icons/Replay.svelte';
+
+	import { status_url, api_base_url, set_api_base_url, default_api_url } from '$data/api/settings';
 	import RouterEvents from '$data/RouterEvents';
+	import { queries } from '$data/api';

 	import { useQueryClient } from '@tanstack/svelte-query';

@ -29,6 +35,7 @@
 	}

 	let url = api_base_url();
+	const statusUrl = status_url();

 	function save() {
 		set_api_base_url(url);
@ -42,6 +49,7 @@
 	let menuOpen = false;
 	let modalOpen = false;
 	let y: number;
+	const pingQuery = () => createQuery(['ping'], queries.ping);

 	onMount(() => {
 		return RouterEvents.subscribe((event) => {
@ -54,67 +62,93 @@

 <svelte:window bind:scrollY={y} />

-<nav class:scrolled={y > 10}>
-	<a class="menu-btn skiptab-btn" href="#skiptab">Skip navigation</a>
+<div id="nav-container">
+	<Query query={pingQuery()} let:data>
+		{#if !data}
+			<span class="banner">
+				<Banner level="caution" permanent>
+					The API is currently unresponsive and some services may not work correctly. {#if statusUrl}
+						Check the <a href={statusUrl} target="_blank" rel="noopener noreferrer">status page</a> for
+						updates.
+					{/if}
+				</Banner>
+			</span>
+		{/if}
+	</Query>

-	<button
-		class="menu-btn mobile-only"
-		on:click={() => (menuOpen = !menuOpen)}
-		class:open={menuOpen}
-		aria-label="Menu"
-	>
-		<span class="menu-btn__burger" />
-	</button>
-	<a href="/" id="logo"><img src="/logo.svg" alt="ReVanced Logo" /></a>
+	<nav class:scrolled={y > 10}>
+		<a class="menu-btn skiptab-btn" href="#skiptab">Skip navigation</a>

-	{#key menuOpen}
-		<div
-			class="nav-wrapper"
-			class:desktop-only={!menuOpen}
-			transition:horizontalSlide={{ direction: 'inline', easing: expoOut, duration: 400 }}
-		>
-			<div id="main-navigation">
-				<ul class="nav-buttons">
-					<Navigation href="/" label="Home">Home</Navigation>
-					<Navigation queryKey="manager" href="/download" label="Download">Download</Navigation>
-					<Navigation queryKey="patches" href="/patches" label="Patches">Patches</Navigation>
-					<Navigation queryKey="contributors" href="/contributors" label="Contributors">
-						Contributors
-					</Navigation>
-					<Navigation queryKey={['about', 'team']} href="/donate" label="Donate">Donate</Navigation>
-				</ul>
-			</div>
-			<div id="secondary-navigation">
-				<button on:click={() => (modalOpen = !modalOpen)} aria-label="Settings">
-					<Svg viewBoxHeight={24} svgHeight={20}>
-						<path
-							d="M 19.1 12.9 C 19.1 12.6 19.2 12.3 19.2 12 C 19.2 11.7 19.2 11.4 19.1 11.1 L 21.1 9.5 C 21.3 9.4 21.3 9.1 21.2 8.9 L 19.3 5.6 C 19.2 5.4 18.9 5.3 18.7 5.4 L 16.3 6.4 C 15.8 6 15.3 5.7 14.7 5.5 L 14.3 3 C 14.3 2.8 14.1 2.6 13.8 2.6 L 10 2.6 C 9.8 2.6 9.6 2.8 9.5 3 L 9.2 5.3 C 8.7 5.6 8.1 5.9 7.6 6.3 L 5.2 5.3 C 5 5.2 4.8 5.3 4.6 5.5 L 2.7 8.9 C 2.6 9.1 2.7 9.3 2.9 9.5 L 4.9 11.1 C 4.9 11.4 4.8 11.7 4.8 12 C 4.8 12.3 4.8 12.6 4.9 12.9 L 2.9 14.5 C 2.7 14.6 2.7 14.9 2.8 15.1 L 4.7 18.4 C 4.8 18.6 5.1 18.7 5.3 18.6 L 7.7 17.6 C 8.2 18 8.7 18.3 9.3 18.5 L 9.7 21 C 9.8 21.2 9.9 21.4 10.2 21.4 L 14 21.4 C 14.2 21.4 14.4 21.2 14.5 21 L 14.9 18.5 C 15.5 18.3 16 17.9 16.5 17.6 L 18.9 18.6 C 19.1 18.7 19.4 18.6 19.5 18.4 L 21.4 15.1 C 21.5 14.9 21.5 14.6 21.3 14.5 L 19.1 12.9 Z M 12 15.6 C 10 15.6 8.4 14 8.4 12 C 8.4 10 10 8.4 12 8.4 C 14 8.4 15.6 10 15.6 12 C 15.6 14 14 15.6 12 15.6 Z"
-						/>
-					</Svg>
-				</button>
-			</div>
-		</div>
-	{/key}
-
-	{#if menuOpen}
-		<div
-			class="overlay mobile-only"
-			transition:fade={{ duration: 350 }}
+		<button
+			class="menu-btn mobile-only"
 			on:click={() => (menuOpen = !menuOpen)}
-			on:keypress={() => (menuOpen = !menuOpen)}
-		/>
-	{/if}
-</nav>
+			class:open={menuOpen}
+			aria-label="Menu"
+		>
+			<span class="menu-btn__burger" />
+		</button>
+		<a href="/" id="logo"><img src="/logo.svg" alt="ReVanced Logo" /></a>
+
+		{#key menuOpen}
+			<div
+				id="nav-wrapper-container"
+				class:desktop-only={!menuOpen}
+				transition:horizontalSlide={{ direction: 'inline', easing: expoOut, duration: 400 }}
+			>
+				<div id="banner-pad">
+					<Query query={pingQuery()} let:data>
+						{#if !data}
+							<span class="banner">
+								<Banner level="caution" permanent>
+									The API is currently unresponsive and some services may not work correctly. {#if statusUrl}
+										Check the
+										<a href={statusUrl} target="_blank" rel="noopener noreferrer">status page</a> for
+										updates.
+									{/if}
+								</Banner>
+							</span>
+						{/if}
+					</Query>
+				</div>
+
+				<div class="nav-wrapper">
+					<div id="main-navigation">
+						<ul class="nav-buttons">
+							<Navigation href="/" label="Home">Home</Navigation>
+							<Navigation queryKey="manager" href="/download" label="Download">Download</Navigation>
+							<Navigation queryKey="patches" href="/patches" label="Patches">Patches</Navigation>
+							<Navigation queryKey="contributors" href="/contributors" label="Contributors">
+								Contributors
+							</Navigation>
+							<Navigation queryKey={['about', 'team']} href="/donate" label="Donate"
+								>Donate</Navigation
+							>
+						</ul>
+					</div>
+					<div id="secondary-navigation">
+						<button on:click={() => (modalOpen = !modalOpen)} aria-label="Settings">
+							<Cog size="20px" color="var(--surface-six)" />
+						</button>
+					</div>
+				</div>
+			</div>
+		{/key}
+
+		{#if menuOpen}
+			<div
+				class="overlay mobile-only"
+				transition:fade={{ duration: 350 }}
+				on:click={() => (menuOpen = !menuOpen)}
+				on:keypress={() => (menuOpen = !menuOpen)}
+			/>
+		{/if}
+	</nav>
+</div>

 <!-- settings -->
 <Modal bind:modalOpen>
 	<svelte:fragment slot="icon">
-		<Svg viewBoxHeight={24} viewBoxWidth={24} svgHeight={24}>
-			<rect fill="none" height="24" width="24" />
-			<path
-				d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"
-			/>
-		</Svg>
+		<Cog size="24px" color="var(--surface-six)" />
 	</svelte:fragment>
 	<svelte:fragment slot="title">Settings</svelte:fragment>
 	<svelte:fragment slot="description">Configure the API for this website.</svelte:fragment>
@ -122,11 +156,7 @@
 		<div class="input-wrapper">
 			<input name="api-url" type="text" bind:value={url} />
 			<button id="button-reset" on:click={reset} aria-label="Reset Button">
-				<Svg viewBoxHeight={48} svgHeight={24}>
-					<path
-						d="M11.2 36.725C14.6667 40.2417 18.8833 42 23.85 42C26.35 42 28.7 41.525 30.9 40.575C33.1 39.625 35.025 38.3333 36.675 36.7C38.325 35.0667 39.625 33.15 40.575 30.95C41.525 28.75 42 26.4 42 23.9C42 21.4 41.525 19.0667 40.575 16.9C39.625 14.7333 38.325 12.8417 36.675 11.225C35.025 9.60833 33.1 8.33333 30.9 7.4C28.7 6.46667 26.35 6 23.85 6C21.1833 6 18.6583 6.58333 16.275 7.75C13.8917 8.91667 11.8333 10.5167 10.1 12.55V7.25H7.1V17.65H17.55V14.65H12.3C13.7667 12.95 15.4917 11.5833 17.475 10.55C19.4583 9.51667 21.5833 9 23.85 9C28.0167 9 31.5833 10.425 34.55 13.275C37.5167 16.125 39 19.6167 39 23.75C39 27.9833 37.5333 31.5833 34.6 34.55C31.6667 37.5167 28.0833 39 23.85 39C19.6833 39 16.1667 37.5333 13.3 34.6C10.4333 31.6667 9 28.1167 9 23.95H6C6 28.95 7.73333 33.2083 11.2 36.725Z"
-					/>
-				</Svg>
+				<Replay size="24px" color="var(--surface-six)" />
 			</button>
 		</div>
 	</div>
@ -137,19 +167,11 @@
 	</svelte:fragment>
 </Modal>

-<style>
+<style lang="scss">
 	#logo {
 		padding: 0.5rem;
 	}

-	path {
-		fill: var(--surface-six);
-	}
-
-	button:hover path {
-		fill: var(--secondary);
-	}
-
 	button {
 		background-color: transparent;
 		border: none;
@ -179,15 +201,26 @@
 		top: 30px;
 	}

+	#nav-container {
+		position: sticky;
+		z-index: 666;
+		width: 100%;
+
+		&:has(.nav-buttons > li:first-child.selected) {
+			margin-bottom: 2.65rem;
+
+			&:has(.banner) {
+				margin-bottom: 1.5rem;
+			}
+		}
+	}
+
 	nav {
-		position: fixed;
-		top: 0;
 		display: flex;
 		gap: 2rem;
 		justify-content: space-between;
 		align-items: center;
 		padding: 1rem 2rem;
-		z-index: 666;
 		height: 70px;
 		background-color: var(--surface-eight);
 		width: 100%;
@ -200,10 +233,6 @@
 		gap: 2rem;
 	}

-	a {
-		display: flex;
-	}
-
 	img {
 		height: 22px;
 	}
@ -239,21 +268,45 @@
 		}
 	}

+	#banner-pad {
+		display: none;
+	}
+
+	#nav-wrapper-container {
+		width: 100%;
+	}
+
 	@media (max-width: 767px) {
+		#banner-pad {
+			display: block;
+			width: 100vw;
+			visibility: hidden;
+		}
+
+		#nav-container:has(.nav-buttons > li:first-child.selected):has(.banner) {
+			margin-bottom: 0rem;
+		}
+
+		#nav-wrapper-container {
+			overflow: hidden;
+			position: fixed;
+			width: 20rem;
+			top: 0;
+			left: 0;
+			height: 100%;
+			background-color: var(--surface-eight);
+			z-index: 100;
+		}
+
 		.nav-wrapper {
 			flex-direction: column;
 			gap: 0.5rem;
 			height: 100%;
 			margin: 0 auto;
-			position: fixed;
 			width: 20rem;
-			top: 0px;
 			border-radius: 0px 24px 24px 0px;
-			left: 0px;
-			background-color: var(--surface-eight);
 			padding: 1rem;
 			padding-top: 6rem;
-			z-index: 100;
 		}

 		.desktop-only {
--- a/src/lib/components/Banner.svelte
+++ b/src/lib/components/Banner.svelte
@ -0,0 +1,160 @@
+<script lang="ts">
+	import Info from 'svelte-material-icons/InformationOutline.svelte';
+	import Warning from 'svelte-material-icons/AlertOutline.svelte';
+	import Caution from 'svelte-material-icons/AlertCircleOutline.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import Button from './Button.svelte';
+
+	export let level: 'info' | 'warning' | 'caution' = 'info';
+	export let permanent: boolean = false;
+
+	const icons = { info: Info, warning: Warning, caution: Caution };
+
+	const dispatch = createEventDispatcher();
+	let closed: boolean = false;
+
+	const dismissBanner = () => {
+		closed = true;
+		dispatch('dismissed');
+	};
+</script>
+
+<div class="banner-container" class:closed class:permanent>
+	<div class="banner {level}">
+		<div class="banner-text">
+			<svelte:component this={icons[level]} size={permanent ? 22.4 : 32} />
+			<span><slot /></span>
+		</div>
+		{#if !permanent}
+			<Button type="text" icon="close" on:click={dismissBanner}>Dismiss</Button>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.banner-container,
+	.banner-container *,
+	.banner-container :global(*) {
+		transition: none;
+	}
+
+	.banner-text :global(a) {
+		color: inherit;
+		text-decoration: none;
+		font-weight: 700;
+	}
+
+	.banner-text :global(a:hover) {
+		text-decoration: underline;
+	}
+
+	.banner-container {
+		display: flex;
+		justify-content: center;
+		width: 100%;
+	}
+
+	.banner-container:not(.permanent) {
+		animation: dropDown var(--bezier-one) 0.7s forwards;
+	}
+
+	.banner-container.closed {
+		animation: swipeUp var(--bezier-one) 1.5s forwards;
+	}
+
+	.banner-container.permanent {
+		font-size: 0.87rem;
+	}
+
+	.banner {
+		margin: 0;
+		padding: 1.5rem 1.7rem;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1.3rem;
+		margin: 0.7rem 1rem;
+		border-radius: 1rem;
+	}
+
+	.banner-container.permanent > .banner {
+		padding: 0.5rem 0.7rem;
+		margin: 0;
+		border-radius: 0;
+		width: 100%;
+	}
+
+	.banner-text {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		gap: 0.55rem;
+		word-wrap: break-word;
+	}
+
+	.banner.info {
+		background-color: var(--surface-four);
+		color: var(--text-one);
+	}
+
+	.banner.warning {
+		background-color: var(--yellow-one);
+		color: #000;
+	}
+
+	.banner.warning > :global(button) {
+		color: #000;
+	}
+
+	.banner.warning > :global(button img) {
+		filter: grayscale(1) brightness(0); /* Make the icon black */
+	}
+
+	.banner.caution {
+		background-color: var(--red-two);
+		color: #000;
+	}
+
+	.banner.caution > :global(button) {
+		color: #000;
+	}
+
+	.banner.caution > :global(button img) {
+		filter: grayscale(1) brightness(0); /* Make the icon white */
+	}
+
+	.banner > :global(button):hover {
+		text-decoration: underline;
+	}
+
+	@media screen and (max-width: 767px) {
+		.banner {
+			flex-direction: column;
+			padding: 1.1rem 1.3rem;
+		}
+
+		.banner > :global(button) {
+			align-self: flex-end;
+		}
+	}
+
+	@keyframes dropDown {
+		0% {
+			top: -100%;
+		}
+		100% {
+			top: 0;
+		}
+	}
+
+	@keyframes swipeUp {
+		0% {
+			top: 0;
+		}
+		100% {
+			top: -100%;
+		}
+	}
+</style>
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@ -1,23 +1,21 @@
 <script lang="ts">
 	export let type: 'filled' | 'tonal' | 'text' | 'outlined';
-	export let icon = '';
-	export let href = '';
-	export let target = '';
-	export let label = '';
+	export let icon: any | undefined = undefined;
+	export let iconSize = 20;
+	export let iconColor = 'currentColor';
+	export let href: string = '';
+	export let target: string = '';
+	export let label: string = '';
 </script>

 {#if href}
 	<a {href} {target} class={`button-${type}`} aria-label={label}>
-		{#if icon}
-			<img src="../icons/{icon}.svg" alt={icon} />
-		{/if}
+		<svelte:component this={icon} size={iconSize} color={iconColor} />
 		<slot />
 	</a>
 {:else}
 	<button on:click class={`button-${type}`} aria-label={label}>
-		{#if icon}
-			<img src="../icons/{icon}.svg" alt={icon} />
-		{/if}
+		<svelte:component this={icon} size={iconSize} color={iconColor} />
 		<slot />
 	</button>
 {/if}
@ -74,8 +72,4 @@
 	a:hover {
 		filter: brightness(85%);
 	}
-
-	img {
-		height: 20px;
-	}
 </style>
--- a/src/lib/components/Dialogue.svelte
+++ b/src/lib/components/Dialogue.svelte
@ -1,6 +1,9 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { quadInOut } from 'svelte/easing';
+
+	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+
 	export let modalOpen = false;
 	export let fullscreen = false;
 	export let notDismissible = false;
@ -39,7 +42,7 @@
 			<div class="title" class:hasIcon={$$slots.icon}>
 				{#if fullscreen}
 					<button id="back-button" on:click={() => (modalOpen = !modalOpen)}>
-						<img src="../icons/back.svg" id="back" alt="back" />
+						<ArrowLeft size="24px" color="var(--surface-six)" />
 					</button>
 				{/if}
 				{#if $$slots.icon}
@ -145,10 +148,6 @@
 		align-items: center;
 	}

-	#back {
-		height: 24px;
-	}
-
 	.fullscreen {
 		padding: 0;
 		max-height: 100%;
--- a/src/lib/components/FilterChip.svelte
+++ b/src/lib/components/FilterChip.svelte
@ -1,4 +1,7 @@
 <script>
+	import Check from 'svelte-material-icons/Check.svelte';
+	import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
+
 	export let dropdown = false;
 	export let check = false;
 	export let selected = false;
@ -6,11 +9,11 @@

 <button class:selected on:click>
 	{#if check}
-		<img id="check" src="/icons/check.svg" alt="selected" />
+		<Check size="18px" color="var(--surface-six)" />
 	{/if}
 	<slot />
 	{#if dropdown}
-		<img id="dropdown" src="/icons/expand_more.svg" alt="dropdown" />
+		<ChevronDown size="18px" color="var(--surface-six)" />
 	{/if}
 </button>

@ -36,10 +39,6 @@
 		color: var(--primary);
 	}

-	img {
-		height: 18px;
-	}
-
 	#dropdown {
 		margin-right: -6px;
 	}
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@ -4,6 +4,9 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';

+	import Close from 'svelte-material-icons/Close.svelte';
+	import Magnify from 'svelte-material-icons/Magnify.svelte';
+
 	export let title: string;
 	export let searchTerm: string | null;
 	export let displayedTerm: string | undefined;
@ -19,16 +22,18 @@
 </script>

 <div class="search-container">
-	<img src="../icons/search.svg" id="search" alt="Search" />
+	<div id="search">
+		<Magnify size="24px" color="var(--surface-six)" />
+	</div>
 	{#if searchTerm}
-		<img
-			src="../icons/close.svg"
+		<div
 			id="clear"
-			alt="Clear"
 			on:click={clear}
 			on:keypress={clear}
 			transition:fade={{ easing: quintOut, duration: 250 }}
-		/>
+		>
+			<Close size="24px" color="var(--surface-six)" />
+		</div>
 	{/if}
 	<input
 		type="text"
--- a/src/lib/components/Wave.svelte
+++ b/src/lib/components/Wave.svelte
@ -4,7 +4,7 @@

 <style>
 	svg {
-		position: fixed;
+		position: absolute;
 		z-index: -999;
 		bottom: 0;
 		height: 35vh;
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -110,6 +110,7 @@

 <QueryClientProvider client={queryClient}>
 	<NavHost />
+
 	<Dialogue bind:modalOpen={showConsentModal} notDismissible>
 		<svelte:fragment slot="title">It's your choice</svelte:fragment>
 		<svelte:fragment slot="description">
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -3,9 +3,17 @@
 	import Home from '$layout/Hero/HeroSection.svelte';
 	import SocialHost from '$layout/Hero/SocialHost.svelte';
 	import Wave from '$lib/components/Wave.svelte';
+	import Footer from '$layout/Footer/FooterHost.svelte';
 	import Head from '$lib/components/Head.svelte';
+
+	let scrollY = 0;
+	let footerVisible = false;
+
+	$: footerVisible = scrollY >= 10;
 </script>

+<svelte:window bind:scrollY />
+
 <Head
 	schemas={[
 		{
@ -117,36 +125,62 @@
 	]}
 />

-<main>
+<main style={footerVisible ? '' : `height: 100vh;`} class:hidden={footerVisible}>
 	<div class="wrap">
 		<div class="wrappezoid">
 			<Home />
 			<div id="heroimg"><HeroImage /></div>
 		</div>
 	</div>
-	<SocialHost />
+	<div class="hide-on-scroll" class:hidden={footerVisible}>
+		<Wave />
+		<SocialHost />
+	</div>
 </main>
-<Wave />
+<div class="footer">
+	<Footer showDivider={footerVisible ? true : false} />
+</div>

-<style>
+<style lang="scss">
+	.hide-on-scroll {
+		transition: opacity 0.5s var(--bezier-one);
+		z-index: -999;
+
+		&.hidden {
+			height: 0;
+			opacity: 0;
+		}
+	}
 	main {
 		display: flex;
 		flex-direction: column;
 		gap: 1.5rem;
+		margin-bottom: 3rem;
+		transition:
+			gap 0.5s var(--bezier-one),
+			margin-bottom 0.5s var(--bezier-one);
+
+		&.hidden {
+			gap: 0rem;
+			margin-bottom: 0rem;
+		}
 	}
 	.wrap {
 		margin-inline: auto;
 		width: min(87%, 100rem);
-		margin-top: 7rem;
 	}
 	.wrappezoid {
 		height: calc(100vh - 225px);
 		display: flex;
-		flex-direction: row;
 		justify-content: center;
-		gap: 22rem;
 		align-items: center;
+		gap: 22rem;
 	}
+
+	.footer {
+		background-color: var(--background-one);
+	}
+
 	@media (max-width: 1700px) {
 		.wrappezoid {
 			justify-content: space-between;
--- a/src/routes/contributors/ContributorSection.svelte
+++ b/src/routes/contributors/ContributorSection.svelte
@ -4,6 +4,8 @@
 	import type { Contributor } from '$lib/types';
 	import ContributorButton from './ContributorPerson.svelte';

+	import ChevronUp from 'svelte-material-icons/ChevronUp.svelte';
+
 	export let contributors: Contributor[];
 	export let name: string;
 	export let url: string;
@ -20,15 +22,12 @@
 		on:click={() => (expanded = !expanded)}
 		on:keypress={() => (expanded = !expanded)}
 	>
-		<a href="{url}" rel="noreferrer" target="_blank" on:click|stopPropagation>
+		<a href={url} rel="noreferrer" target="_blank" on:click|stopPropagation>
 			<h4>{name}</h4>
 		</a>
-		<img
-			id="arrow"
-			style:transform={expanded ? 'rotate(0deg)' : 'rotate(-180deg)'}
-			src="/icons/expand_less.svg"
-			alt="dropdown"
-		/>
+		<div id="arrow" style:transform={expanded ? 'rotate(0deg)' : 'rotate(180deg)'}>
+			<ChevronUp size="24px" color="var(--surface-six)" />
+		</div>
 	</div>

 	{#if expanded}
@ -63,7 +62,6 @@
 	}

 	#arrow {
-		height: 1.5rem;
 		transition: all 0.2s var(--bezier-one);
 		user-select: none;
 	}
--- a/src/routes/donate/+page.svelte
+++ b/src/routes/donate/+page.svelte
@ -16,6 +16,10 @@
 	import DonateHeartAnimation from './DonateHeartAnimation.svelte';
 	import TeamMember from './TeamMember.svelte';

+	import CircleMultipleOutline from 'svelte-material-icons/CircleMultipleOutline.svelte';
+	import WalletOutline from 'svelte-material-icons/WalletOutline.svelte';
+	import ChevronUp from 'svelte-material-icons/ChevronUp.svelte';
+
 	import { supportsWebP } from '$util/supportsWebP';

 	const teamQuery = createQuery(['team'], queries.team);
@ -135,7 +139,7 @@

 <Dialogue bind:modalOpen={cryptoDialogue}>
 	<svelte:fragment slot="icon">
-		<img class="qr-code" src="/icons/coins.svg" alt="Cryptocurrencies" />
+		<CircleMultipleOutline size="32px" color="var(--surface-six)" />
 	</svelte:fragment>
 	<svelte:fragment slot="title">Cryptocurrencies</svelte:fragment>
 	<svelte:fragment slot="description">
@ -161,7 +165,9 @@
 							/>
 							{`${wallet.network} (${wallet.currency_code})`}
 						</div>
-						<img id="arrow" src="/icons/expand_less.svg" alt="continue" />
+						<div id="arrow">
+							<ChevronUp size="20px" color="var(--surface-six)" />
+						</div>
 					</button>
 				{/each}
 			</Query>
@ -174,7 +180,7 @@

 <Dialogue bind:modalOpen={qrCodeDialogue}>
 	<svelte:fragment slot="icon">
-		<img class="qr-code" src="/icons/wallet.svg" alt="QR Code" />
+		<WalletOutline size="32px" color="var(--surface-six)" />
 	</svelte:fragment>
 	<svelte:fragment slot="title">{qrCodeDialogueName} Wallet</svelte:fragment>
 	<svelte:fragment slot="description">
@ -205,7 +211,6 @@
 	main {
 		display: flex;
 		flex-direction: column;
-		margin-top: 7rem;

 		// support revanced and heart thingy
 		section {
--- a/src/routes/donate/TeamMember.svelte
+++ b/src/routes/donate/TeamMember.svelte
@ -4,7 +4,8 @@

 	import type { TeamMember } from '$lib/types';
 	import ToolTip from '$lib/components/ToolTip.svelte';
-	import Svg from '$lib/components/Svg.svelte';
+
+	import CheckDecagramOutline from 'svelte-material-icons/CheckDecagramOutline.svelte';

 	export let member: TeamMember;
 	export let i: number;
@ -15,9 +16,6 @@
 		duration: 750,
 		delay: 50 * i
 	};
-
-	const verifiedIconPath =
-		'm9.585.52.929.68c.153.112.331.186.518.215l1.138.175a2.678 2.678 0 0 1 2.24 2.24l.174 1.139c.029.187.103.365.215.518l.68.928a2.677 2.677 0 0 1 0 3.17l-.68.928a1.174 1.174 0 0 0-.215.518l-.175 1.138a2.678 2.678 0 0 1-2.241 2.241l-1.138.175a1.17 1.17 0 0 0-.518.215l-.928.68a2.677 2.677 0 0 1-3.17 0l-.928-.68a1.174 1.174 0 0 0-.518-.215L3.83 14.41a2.678 2.678 0 0 1-2.24-2.24l-.175-1.138a1.17 1.17 0 0 0-.215-.518l-.68-.928a2.677 2.677 0 0 1 0-3.17l.68-.928c.112-.153.186-.331.215-.518l.175-1.14a2.678 2.678 0 0 1 2.24-2.24l1.139-.175c.187-.029.365-.103.518-.215l.928-.68a2.677 2.677 0 0 1 3.17 0ZM7.303 1.728l-.927.68a2.67 2.67 0 0 1-1.18.489l-1.137.174a1.179 1.179 0 0 0-.987.987l-.174 1.136a2.677 2.677 0 0 1-.489 1.18l-.68.928a1.18 1.18 0 0 0 0 1.394l.68.927c.256.348.424.753.489 1.18l.174 1.137c.078.509.478.909.987.987l1.136.174a2.67 2.67 0 0 1 1.18.489l.928.68c.414.305.979.305 1.394 0l.927-.68a2.67 2.67 0 0 1 1.18-.489l1.137-.174a1.18 1.18 0 0 0 .987-.987l.174-1.136a2.67 2.67 0 0 1 .489-1.18l.68-.928a1.176 1.176 0 0 0 0-1.394l-.68-.927a2.686 2.686 0 0 1-.489-1.18l-.174-1.137a1.179 1.179 0 0 0-.987-.987l-1.136-.174a2.677 2.677 0 0 1-1.18-.489l-.928-.68a1.176 1.176 0 0 0-1.394 0ZM11.28 6.78l-3.75 3.75a.75.75 0 0 1-1.06 0L4.72 8.78a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L7 8.94l3.22-3.22a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z';
 </script>

 <div class="member">
@ -37,15 +35,11 @@
 				>
 					<div class="desktop">
 						<a href={member.gpg_key.url} rel="noreferrer" target="_blank">
-							<Svg svgHeight={16} viewBoxHeight={16}>
-								<path d={verifiedIconPath} />
-							</Svg>
+							<CheckDecagramOutline size="20px" color="var(--secondary)" />
 						</a>
 					</div>
 					<div class="mobile">
-						<Svg svgHeight={16} viewBoxHeight={16}>
-							<path d={verifiedIconPath} />
-						</Svg>
+						<CheckDecagramOutline size="20px" color="var(--secondary)" />
 						<h5>GPG key</h5>
 					</div>
 				</ToolTip>
--- a/src/routes/download/+page.svelte
+++ b/src/routes/download/+page.svelte
@ -7,6 +7,8 @@

 	import manager_screenshot from '$images/manager.png?format=avif;webp;png&as=picture';

+	import TrayArrowDown from 'svelte-material-icons/TrayArrowDown.svelte';
+
 	import Head from '$lib/components/Head.svelte';
 	import Query from '$lib/components/Query.svelte';
 	import Button from '$lib/components/Button.svelte';
@ -89,14 +91,14 @@
 	<div class="buttons">
 		<Query {query} let:data>
 			{#if !isAndroid || androidVersion < 8}
-				<Button on:click={handleClick} type="filled" icon="download">
+				<Button on:click={handleClick} icon={TrayArrowDown} type="filled">
 					{data.release.version}
 				</Button>
 			{:else}
 				<Button
 					on:click={handleClick}
+					icon={TrayArrowDown}
 					type="filled"
-					icon="download"
 					href={data.release.download_url}
 				>
 					{data.release.version}
--- a/src/routes/patches/+page.svelte
+++ b/src/routes/patches/+page.svelte
@ -207,7 +207,7 @@
 	}

 	.search {
-		padding-top: 5rem;
+		padding-top: 0.6rem;
 		padding-bottom: 1.25rem;
 		background-color: var(--surface-eight);
 	}
@ -258,10 +258,6 @@
 			display: none;
 		}

-		.search {
-			padding-top: 4.5rem;
-		}
-
 		.patches-container {
 			margin-top: 1rem;
 			margin-bottom: 1.5rem;
--- a/src/routes/patches/PatchItem.svelte
+++ b/src/routes/patches/PatchItem.svelte
@ -1,10 +1,12 @@
 <script lang="ts">
 	import { slide, fade } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
+
 	import type { Patch } from '$lib/types';
-	import { compare, coerce } from 'semver';
 	import Button from '$lib/components/Button.svelte';

+	import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
+
 	export let patch: Patch;
 	export let showAllVersions: boolean;
 	let expanded: boolean = false;
@ -28,7 +30,9 @@
 			<h3>{patch.name}</h3>
 		</div>
 		{#if hasPatchOptions}
-			<img class="expand-arrow" src="/icons/expand_more.svg" alt="dropdown" />
+			<div class="expand-arrow">
+				<ChevronDown size="24px" color="var(--surface-six)" />
+			</div>
 		{/if}
 	</div>
 	{#if patch.description}
@ -71,12 +75,12 @@
 			{#if patch.compatiblePackages[0].versions.length > 1}
 				<li class="button">
 					<Button type="text" on:click={() => (showAllVersions = !showAllVersions)}>
-						<img
+						<div
 							class="expand-arrow"
 							style:transform={showAllVersions ? 'rotate(90deg)' : 'rotate(-90deg)'}
-							src="/icons/expand_more.svg"
-							alt="dropdown"
-						/>
+						>
+							<ChevronDown size="24px" color="var(--surface-six)" />
+						</div>
 					</Button>
 				</li>
 			{/if}
--- a/static/icons/arrow.svg
+++ b/static/icons/arrow.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="#ACC1D2" d="m24 30-10-9.95h20Z"/></svg>
--- a/static/icons/back.svg
+++ b/static/icons/back.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="#AFD3F4" d="M24 40.3 7.7 24 24 7.7l2.8 2.75L15.3 22h25v4h-25l11.5 11.5Z"/></svg>
--- a/static/icons/check.svg
+++ b/static/icons/check.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="#ACC1D2" d="M18.9 36.4 7 24.5l2.9-2.85 9 9L38.05 11.5l2.9 2.85Z"/></svg>
--- a/static/icons/close.svg
+++ b/static/icons/close.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ACC0D3" d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
--- a/static/icons/coins.svg
+++ b/static/icons/coins.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#ACC1D2" viewBox="0 0 24 24"><path d="M15 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8m0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6M3 12a5.99 5.99 0 0 1 4-5.65V4.26C3.55 5.15 1 8.27 1 12s2.55 6.85 6 7.74v-2.09A5.99 5.99 0 0 1 3 12"/></svg>
--- a/static/icons/docs.svg
+++ b/static/icons/docs.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#FFF" d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm4 18H6V4h7v5h5z"/></svg>
--- a/static/icons/download.svg
+++ b/static/icons/download.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M11 40q-1.2 0-2.1-.9Q8 38.2 8 37v-7.15h3V37h26v-7.15h3V37q0 1.2-.9 2.1-.9.9-2.1.9Zm13-7.65-9.65-9.65 2.15-2.15 6 6V8h3v18.55l6-6 2.15 2.15Z"/></svg>
--- a/static/icons/expand_less.svg
+++ b/static/icons/expand_less.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#ACC1D2" viewBox="0 0 24 24"><path d="M11.29 8.71 6.7 13.3a.996.996 0 1 0 1.41 1.41L12 10.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 8.71a.996.996 0 0 0-1.41 0"/></svg>
--- a/static/icons/expand_more.svg
+++ b/static/icons/expand_more.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#ACC1D2" viewBox="0 0 24 24"><path d="M15.88 9.29 12 13.17 8.12 9.29a.996.996 0 1 0-1.41 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 0 0 0-1.41c-.39-.38-1.03-.39-1.42 0"/></svg>
--- a/static/icons/heart.svg
+++ b/static/icons/heart.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#F04E98" viewBox="0 0 24 24"><path d="m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#F04E98" viewBox="0 0 24 24"><path d="m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z" /></svg>
--- a/static/icons/home.svg
+++ b/static/icons/home.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M11 42q-1.25 0-2.125-.875T8 39V19.5q0-.7.325-1.35.325-.65.875-1.05l13-9.75q.4-.3.85-.45.45-.15.95-.15.5 0 .95.15.45.15.85.45l13 9.75q.55.4.875 1.05.325.65.325 1.35V39q0 1.25-.875 2.125T37 42h-9V28h-8v14Z"/></svg>
--- a/static/icons/qr_code.svg
+++ b/static/icons/qr_code.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#acc1d2" viewBox="0 0 20 20"><path d="M4 9h5V4H4zm.94-4.06h3.12v3.12H4.94zM4 16h5v-5H4zm.94-4.06h3.12v3.12H4.94zM11 4v5h5V4zm4.06 4.06h-3.12V4.94h3.12zM15 15h1v1h-1zm0-2h1v1h-1zm0-2h1v1h-1zm-3 1h1v1h-1zm-1-1h1v1h-1zm2 2h1v1h-1zm1 1h1v1h-1zm-1-3h1v1h-1zm1 1h1v1h-1zm-3 1h1v1h-1zm1 1h1v1h-1zm-1 1h1v1h-1zm2 0h1v1h-1z"/></svg>
--- a/static/icons/reset.svg
+++ b/static/icons/reset.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#ACC1D2"><path d="M14 38v-3h14.45q3.5 0 6.025-2.325Q37 30.35 37 26.9t-2.525-5.775Q31.95 18.8 28.45 18.8H13.7l5.7 5.7-2.1 2.1L8 17.3 17.3 8l2.1 2.1-5.7 5.7h14.7q4.75 0 8.175 3.2Q40 22.2 40 26.9t-3.425 7.9Q33.15 38 28.4 38Z"/></svg>
--- a/static/icons/search.svg
+++ b/static/icons/search.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="#ACC0D3" d="m39.75 42.75-13.3-13.3Q25 30.65 23 31.35t-4.25.7q-5.65 0-9.525-3.9t-3.875-9.4q0-5.5 3.9-9.4 3.9-3.9 9.4-3.9 5.55 0 9.4 3.9 3.85 3.9 3.85 9.4 0 2.2-.65 4.15-.65 1.95-1.95 3.7l13.35 13.25ZM18.7 28.05q3.85 0 6.55-2.725 2.7-2.725 2.7-6.575t-2.7-6.575Q22.55 9.45 18.7 9.45q-3.95 0-6.675 2.725Q9.3 14.9 9.3 18.75t2.725 6.575Q14.75 28.05 18.7 28.05"/></svg>
--- a/static/icons/wallet.svg
+++ b/static/icons/wallet.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 960 960"><path fill="#ACC1D2" d="M240 800q-66 0-113-47T80 640V320q0-66 47-113t113-47h480q66 0 113 47t47 113v320q0 66-47 113t-113 47zm0-470h480q29 0 54.5 9t45.5 26v-45q0-42-29-71t-71-29H240q-42 0-71 29t-29 71v45q20-17 45.5-26t54.5-9m-97 136 477 115q7 2 14.5.5T647 575l160-134q-13-23-36-37t-51-14H240q-35 0-62 21.5T143 466"/></svg>
				`@ -0,0 +1 @@`
				<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="Logo"><g id="Ring"><circle id="Ring-Background" serif:id="Ring Background" cx="400" cy="400" r="400" style="fill:#1b1b1b;"/><path id="Ring1" serif:id="Ring" d="M400,0c220.766,0 400,179.234 400,400c-0,220.766 -179.234,400 -400,400c-220.766,-0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-0,36c200.897,-0 364,163.103 364,364c0,200.897 -163.103,364 -364,364c-200.897,0 -364,-163.103 -364,-364c-0,-200.897 163.103,-364 364,-364Z" style="fill:url(#_Linear1);"/></g><g id="Shape"><path id="V-Shape" serif:id="V Shape" d="M538.74,269.872c1.481,-3.382 1.157,-7.283 -0.863,-10.373c-2.021,-3.091 -5.464,-4.954 -9.156,-4.954c-5.148,0 -10.435,0 -14.165,0c-3.1,0 -5.907,1.834 -7.153,4.672c-12.468,28.396 -78.273,178.273 -100.25,228.328c-1.246,2.838 -4.053,4.671 -7.154,4.671c-3.1,0 -5.907,-1.833 -7.153,-4.671c-21.977,-50.055 -87.782,-199.932 -100.25,-228.328c-1.246,-2.838 -4.053,-4.672 -7.153,-4.672c-3.73,0 -9.017,0 -14.164,0c-3.693,0 -7.135,1.863 -9.156,4.954c-2.02,3.09 -2.344,6.991 -0.863,10.373c23.557,53.766 101.872,232.519 117.871,269.034c1.743,3.979 5.674,6.549 10.018,6.549c6.293,-0 15.408,-0 21.701,-0c4.344,-0 8.275,-2.57 10.018,-6.549c15.999,-36.515 94.315,-215.268 117.872,-269.034Z" style="fill:#fff;"/><path id="Diamond" d="M408.119,395.312c-1.675,2.901 -4.77,4.688 -8.119,4.688c-3.349,-0 -6.444,-1.787 -8.119,-4.688c-16.997,-29.44 -56.156,-97.264 -73.153,-126.704c-1.675,-2.901 -1.675,-6.474 0,-9.375c1.675,-2.901 4.77,-4.688 8.119,-4.688c33.995,0 112.311,0 146.306,0c3.349,0 6.444,1.787 8.119,4.688c1.675,2.901 1.675,6.474 -0,9.375c-16.997,29.44 -56.156,97.264 -73.153,126.704Z" style="fill:url(#_Linear2);"/></g></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.89859e-14,800,-800,4.89859e-14,400.001,3.31681e-10)"><stop offset="0" style="stop-color:#f04e98;stop-opacity:1"/><stop offset="0.5" style="stop-color:#5f65d4;stop-opacity:1"/><stop offset="1" style="stop-color:#4e98f0;stop-opacity:1"/></linearGradient><linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.77155e-14,289.317,-282.535,1.73003e-14,400,254.545)"><stop offset="0" style="stop-color:#f04e98;stop-opacity:1"/><stop offset="0.5" style="stop-color:#5f65d4;stop-opacity:1"/><stop offset="1" style="stop-color:#4e98f0;stop-opacity:1"/></linearGradient></defs></svg>
				`@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="#ACC1D2" d="m24 30-10-9.95h20Z"/></svg>`