diff --git a/master/assets/images/wgportal_dark.png b/master/assets/images/wgportal_dark.png
index 7260037..b72ec95 100644
Binary files a/master/assets/images/wgportal_dark.png and b/master/assets/images/wgportal_dark.png differ
diff --git a/master/assets/images/wgportal_light.png b/master/assets/images/wgportal_light.png
index 9b76aa6..0add328 100644
Binary files a/master/assets/images/wgportal_light.png and b/master/assets/images/wgportal_light.png differ
diff --git a/master/index.html b/master/index.html
index 22c92ce..6318023 100644
--- a/master/index.html
+++ b/master/index.html
@@ -60,7 +60,7 @@
 }
 .tx-hero__image {
   max-width: 1000px;
-  min-width: 600px;
+  min-width: 0;
   width: 100%;
   height: auto;
   margin: 0 auto;
@@ -210,7 +210,7 @@
 
 .secondary-section .g .section .component-wrapper .responsive-grid .card {
   position: relative;
-  background-color:  #fff none repeat scroll 0% 0%;
+  background-color:  #fff;
   padding: 1.5rem;
   display: flex;
   flex-direction: row;
@@ -345,4 +345,4 @@
 }
 
 
-</style> <!-- Hero for landing page --> <div class="md-container tx-hero"> <div class="md-grid md-typeset"> <div class=md-main__inner> <div> <h1>A beautiful and simple UI to manage your WireGuard peers and interfaces</h1> <p>WireGuard Portal is an open source web-based user interface that makes it easy to setup and manage WireGuard VPN connections. It's built on top of WireGuard's official <span class=em>wgctrl</span> library.</p> </p> <a href=documentation/overview/ title="Get Started" class="md-button md-button--primary"> Get started <svg width=11 height=10 viewbox="0 0 11 10" fill=none style=margin-left:2px><path d="M1 5.16772H9.5M9.5 5.16772L6.5 1.66772M9.5 5.16772L6.5 8.66772" stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round></path></svg> </a> </div> </div> </div> </div> <div class=md-container> <div class=tx-hero__image> <div> <img-comparison-slider hover=hover> <figure slot=first class=before> <img src=https://wgportal.org/master/assets/images/wgportal_light.png alt="Light Mode"> <figcaption>Light Mode</figcaption> </figure> <figure slot=second class=after> <img src=https://wgportal.org/master/assets/images/wgportal_dark.png alt="Dark Mode"> <figcaption>Dark Mode</figcaption> </figure> <svg slot=handle class=custom-animated-handle xmlns=http://www.w3.org/2000/svg width=100 viewbox="-8 -3 16 6"> <!-- Left arrow (dark) --> <path d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2" stroke=#1a1a1a fill=#1a1a1a stroke-width=1 vector-effect=non-scaling-stroke> </path> <!-- Right arrow (white) --> <path d="M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke=#fff fill=#fff stroke-width=1 vector-effect=non-scaling-stroke> </path> </svg> </img-comparison-slider> </div> </div> </div> <div class="md-container secondary-section"> <div class=g> <!-- Architecture as building blocks --> <div class=section> <div class=component-wrapper> <div class=first-column> <h3>More information about WireGuard</h3> <p> WireGuard® is an extremely <span class=em>simple</span> yet <span class=em>fast</span> and modern VPN that utilizes <span class=em>state-of-the-art cryptography</span>. </p> <p> WireGuard uses state-of-the-art <a href=https://www.wireguard.com/protocol/ >cryptography</a> and still manages to be as easy to configure and deploy as SSH. A combination of extremely high-speed cryptographic primitives and the fact that WireGuard lives inside the Linux kernel means that secure networking can be very high-speed. It is suitable for both small embedded devices like smartphones and fully loaded backbone routers. </p> </div> <div class=second-column> <div class=image-wrapper> <img src=https://wgportal.org/master/assets/images/wg-tool.png alt draggable=false> </div> </div> </div> <div class=component-wrapper style="display: block;"> <h4>Explore official documentation</h4> <!-- Arch as code --> <div class=responsive-grid> <a href=https://www.wireguard.com/ class=card-wrapper> <div class=card> <div class=logo> <span class=twemoji> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 3a2 2 0 0 1 2-2h9.982a2 2 0 0 1 1.414.586l4.018 4.018A2 2 0 0 1 21 7.018V21a2 2 0 0 1-2 2H4.75a.75.75 0 0 1 0-1.5H19a.5.5 0 0 0 .5-.5V8.5h-4a2 2 0 0 1-2-2v-4H5a.5.5 0 0 0-.5.5v6.25a.75.75 0 0 1-1.5 0Zm12-.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0-.146-.336l-4.018-4.018A.5.5 0 0 0 15 2.5"/><path d="M4.53 12.24a.75.75 0 0 1-.039 1.06l-2.639 2.45 2.64 2.45a.75.75 0 1 1-1.022 1.1l-3.23-3a.75.75 0 0 1 0-1.1l3.23-3a.75.75 0 0 1 1.06.04m3.979 1.06a.75.75 0 1 1 1.02-1.1l3.231 3a.75.75 0 0 1 0 1.1l-3.23 3a.75.75 0 1 1-1.021-1.1l2.639-2.45-2.64-2.45Z"/></svg> </span> </div> <div class=card-content> <h5>Official Website</h5> <p> If you'd like a general conceptual overview of what WireGuard is about, read onward here. </p> </div> </div> </a> <!-- Networking --> <a href=https://www.wireguard.com/protocol/ class=card-wrapper> <div class=card> <div class=logo> <span class=twemoji> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 576 512"><!-- Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M248 88h80v48h-80zm-8-56c-26.5 0-48 21.5-48 48v64c0 26.5 21.5 48 48 48h16v32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96v32h-16c-26.5 0-48 21.5-48 48v64c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48v-64c0-26.5-21.5-48-48-48h-16v-32h192v32h-16c-26.5 0-48 21.5-48 48v64c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48v-64c0-26.5-21.5-48-48-48h-16v-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H320v-32h16c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm208 344h8v48h-80v-48zm-256 0h8v48h-80v-48z"/></svg> </span> </div> <div class=card-content> <h5>Protocol & Cryptography</h5> <p> WireGuard uses state-of-the-art cryptography, like the Noise protocol framework, Curve25519, ChaCha20, Poly1305, BLAKE2, SipHash24, HKDF, and secure trusted constructions. </p> </div> </div> </a> <!-- Customize --> <a href=https://www.wireguard.com/install/ class=card-wrapper> <div class=card> <div class=logo> <span class=twemoji> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M224 0c35.3 0 64 21.5 64 48 0 10.4-4.4 20-12 27.9-6.6 6.9-12 15.3-12 24.9 0 15 12.2 27.2 27.2 27.2H336c26.5 0 48 21.5 48 48v44.8c0 15 12.2 27.2 27.2 27.2 9.5 0 18-5.4 24.9-12 7.9-7.5 17.5-12 27.9-12 26.5 0 48 28.7 48 64s-21.5 64-48 64c-10.4 0-20.1-4.4-27.9-12-6.9-6.6-15.3-12-24.9-12-15 0-27.2 12.2-27.2 27.2V464c0 26.5-21.5 48-48 48h-56.8c-12.8 0-23.2-10.4-23.2-23.2 0-9.2 5.8-17.3 13.2-22.8 11.6-8.7 18.8-20.7 18.8-34 0-26.5-28.7-48-64-48s-64 21.5-64 48c0 13.3 7.2 25.3 18.8 34 7.4 5.5 13.2 13.5 13.2 22.8 0 12.8-10.4 23.2-23.2 23.2H48c-26.5 0-48-21.5-48-48V343.2C0 330.4 10.4 320 23.2 320c9.2 0 17.3 5.8 22.8 13.2 8.7 11.6 20.7 18.8 34 18.8 26.5 0 48-28.7 48-64s-21.5-64-48-64c-13.3 0-25.3 7.2-34 18.8-5.5 7.4-13.5 13.2-22.8 13.2C10.4 256 0 245.6 0 232.8V176c0-26.5 21.5-48 48-48h108.8c15 0 27.2-12.2 27.2-27.2 0-9.5-5.4-18-12-24.9-7.5-7.9-12-17.5-12-27.9 0-26.5 28.7-48 64-48"/></svg> </span> </div> <div class=card-content> <h5>Client Installation</h5> <p> You may progress to installation and reading the quickstart instructions on how to use it. </p> </div> </div> </a> </div> </div> </div> </div> </div> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=. title="WireGuard Portal" class="md-nav__button md-logo" aria-label="WireGuard Portal" data-md-component=logo> <img src=assets/images/logo.svg alt=logo> </a> WireGuard Portal </label> <div class=md-nav__source> <a href=https://github.com/h44z/wg-portal title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 448 512"><!-- Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg> </div> <div class=md-source__repository> h44z/wg-portal </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type=checkbox id=__toc> <a href=. class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> Home </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex=0> <span class=md-ellipsis> Documentation </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Documentation </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=documentation/overview/ class=md-nav__link> <span class=md-ellipsis> Overview </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_2> <label class=md-nav__link for=__nav_2_2 id=__nav_2_2_label tabindex=0> <span class=md-ellipsis> Getting Started </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2_2> <span class="md-nav__icon md-icon"></span> Getting Started </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=documentation/getting-started/binaries/ class=md-nav__link> <span class=md-ellipsis> Binaries </span> </a> </li> <li class=md-nav__item> <a href=documentation/getting-started/docker/ class=md-nav__link> <span class=md-ellipsis> Docker </span> </a> </li> <li class=md-nav__item> <a href=documentation/getting-started/helm/ class=md-nav__link> <span class=md-ellipsis> Helm </span> </a> </li> <li class=md-nav__item> <a href=documentation/getting-started/sources/ class=md-nav__link> <span class=md-ellipsis> Sources </span> </a> </li> <li class=md-nav__item> <a href=documentation/getting-started/reverse-proxy/ class=md-nav__link> <span class=md-ellipsis> Reverse Proxy (HTTPS) </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_3> <label class=md-nav__link for=__nav_2_3 id=__nav_2_3_label tabindex=0> <span class=md-ellipsis> Configuration </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_3_label aria-expanded=false> <label class=md-nav__title for=__nav_2_3> <span class="md-nav__icon md-icon"></span> Configuration </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=documentation/configuration/overview/ class=md-nav__link> <span class=md-ellipsis> Overview </span> </a> </li> <li class=md-nav__item> <a href=documentation/configuration/examples/ class=md-nav__link> <span class=md-ellipsis> Examples </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_4> <label class=md-nav__link for=__nav_2_4 id=__nav_2_4_label tabindex=0> <span class=md-ellipsis> Usage </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_4_label aria-expanded=false> <label class=md-nav__title for=__nav_2_4> <span class="md-nav__icon md-icon"></span> Usage </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=documentation/usage/general/ class=md-nav__link> <span class=md-ellipsis> General </span> </a> </li> <li class=md-nav__item> <a href=documentation/usage/backends/ class=md-nav__link> <span class=md-ellipsis> Backends </span> </a> </li> <li class=md-nav__item> <a href=documentation/usage/ldap/ class=md-nav__link> <span class=md-ellipsis> LDAP </span> </a> </li> <li class=md-nav__item> <a href=documentation/usage/security/ class=md-nav__link> <span class=md-ellipsis> Security </span> </a> </li> <li class=md-nav__item> <a href=documentation/usage/webhooks/ class=md-nav__link> <span class=md-ellipsis> Webhooks </span> </a> </li> <li class=md-nav__item> <a href=documentation/rest-api/api-doc/ class=md-nav__link> <span class=md-ellipsis> REST API </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=documentation/upgrade/v1/ class=md-nav__link> <span class=md-ellipsis> Upgrade </span> </a> </li> <li class=md-nav__item> <a href=documentation/monitoring/prometheus/ class=md-nav__link> <span class=md-ellipsis> Monitoring </span> </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component=sidebar data-md-type=toc> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> </article> </div> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> </main> <!-- Application footer --> <footer class=md-footer> <!-- Further information --> <div class="md-footer-meta md-typeset" style="background-color: #fff;"> <div class="md-footer-meta__inner md-grid" style="background-color: #fff;"> <!-- Copyright and theme information --> <div class=md-footer-copyright> <div class=md-footer-copyright__highlight style="color: rgb(38, 38, 38);"> Copyright &copy; 2023-2025 WireGuard Portal Project </div> <div style="color: rgb(38, 38, 38);"> Made with <a href=https://squidfunk.github.io/mkdocs-material/ target=_blank rel=noopener style="color: black;"> Material for MkDocs </a> </div> </div> <!-- Social links --> <div class=md-social> <a href=https://github.com/h44z/wg-portal target=_blank rel=noopener title=github.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M202.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1M496 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2m-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3m-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1"/></svg> </a> <a href=https://hub.docker.com/r/wgportal/wg-portal target=_blank rel=noopener title=hub.docker.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 640 512"><!-- Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M349.9 236.3h-66.1v-59.4h66.1zm0-204.3h-66.1v60.7h66.1zm78.2 144.8H362v59.4h66.1zm-156.3-72.1h-66.1v60.1h66.1zm78.1 0h-66.1v60.1h66.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4.4 67.6.1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1zm78.1 0h-66.1v59.4h66.1zm-78.1-72.1h-66.1v60.1h66.1z"/></svg> </a> <a href=https://twitter.com/chris_h44z target=_blank rel=noopener title=twitter.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M459.4 151.7c.3 4.5.3 9.1.3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53C87.4 130.8 165 172.4 252.1 176.9c-1.6-7.8-2.6-15.9-2.6-24C249.5 95.1 296.3 48 354.4 48c30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3"/></svg> </a> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": ".", "features": ["content.code.copy", "navigation.instant", "navigation.tabs", "navigation.expand"], "search": "assets/javascripts/workers/search.973d3a69.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"default": "latest", "provider": "mike"}}</script> <script src=assets/javascripts/bundle.f55a23d4.min.js></script> <script src=javascript/img-comparison-slider.js></script> </body> </html>
\ No newline at end of file
+</style> <!-- Hero for landing page --> <div class="md-container tx-hero"> <div class="md-grid md-typeset"> <div class=md-main__inner> <div> <h1>A beautiful and simple UI to manage your WireGuard peers and interfaces</h1> <p>WireGuard Portal is an open source web-based user interface that makes it easy to setup and manage WireGuard VPN connections. It's built on top of WireGuard's official <span class=em>wgctrl</span> library.</p> <a href=documentation/overview/ title="Get Started" class="md-button md-button--primary"> Get started <svg width=11 height=10 viewbox="0 0 11 10" fill=none style=margin-left:2px><path d="M1 5.16772H9.5M9.5 5.16772L6.5 1.66772M9.5 5.16772L6.5 8.66772" stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round></path></svg> </a> </div> </div> </div> </div> <div class=md-container> <div class=tx-hero__image> <div> <img-comparison-slider hover=hover> <figure slot=first class=before> <img src=https://wgportal.org/master/assets/images/wgportal_light.png alt="Light Mode"> <figcaption>Light Mode</figcaption> </figure> <figure slot=second class=after> <img src=https://wgportal.org/master/assets/images/wgportal_dark.png alt="Dark Mode"> <figcaption>Dark Mode</figcaption> </figure> <svg slot=handle class=custom-animated-handle xmlns=http://www.w3.org/2000/svg width=100 viewbox="-8 -3 16 6"> <!-- Left arrow (dark) --> <path d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2" stroke=#1a1a1a fill=#1a1a1a stroke-width=1 vector-effect=non-scaling-stroke> </path> <!-- Right arrow (white) --> <path d="M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke=#fff fill=#fff stroke-width=1 vector-effect=non-scaling-stroke> </path> </svg> </img-comparison-slider> </div> </div> </div> <div class="md-container secondary-section"> <div class=g> <!-- Architecture as building blocks --> <div class=section> <div class=component-wrapper> <div class=first-column> <h3>More information about WireGuard</h3> <p> WireGuard® is an extremely <span class=em>simple</span> yet <span class=em>fast</span> and modern VPN that utilizes <span class=em>state-of-the-art cryptography</span>. </p> <p> WireGuard uses state-of-the-art <a href=https://www.wireguard.com/protocol/ >cryptography</a> and still manages to be as easy to configure and deploy as SSH. A combination of extremely high-speed cryptographic primitives and the fact that WireGuard lives inside the Linux kernel means that secure networking can be very high-speed. It is suitable for both small embedded devices like smartphones and fully loaded backbone routers. </p> </div> <div class=second-column> <div class=image-wrapper> <img src=https://wgportal.org/master/assets/images/wg-tool.png alt draggable=false> </div> </div> </div> <div class=component-wrapper style="display: block;"> <h4>Explore official documentation</h4> <!-- Arch as code --> <div class=responsive-grid> <a href=https://www.wireguard.com/ class=card-wrapper> <div class=card> <div class=logo> <span class=twemoji> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 3a2 2 0 0 1 2-2h9.982a2 2 0 0 1 1.414.586l4.018 4.018A2 2 0 0 1 21 7.018V21a2 2 0 0 1-2 2H4.75a.75.75 0 0 1 0-1.5H19a.5.5 0 0 0 .5-.5V8.5h-4a2 2 0 0 1-2-2v-4H5a.5.5 0 0 0-.5.5v6.25a.75.75 0 0 1-1.5 0Zm12-.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0-.146-.336l-4.018-4.018A.5.5 0 0 0 15 2.5"/><path d="M4.53 12.24a.75.75 0 0 1-.039 1.06l-2.639 2.45 2.64 2.45a.75.75 0 1 1-1.022 1.1l-3.23-3a.75.75 0 0 1 0-1.1l3.23-3a.75.75 0 0 1 1.06.04m3.979 1.06a.75.75 0 1 1 1.02-1.1l3.231 3a.75.75 0 0 1 0 1.1l-3.23 3a.75.75 0 1 1-1.021-1.1l2.639-2.45-2.64-2.45Z"/></svg> </span> </div> <div class=card-content> <h5>Official Website</h5> <p> If you'd like a general conceptual overview of what WireGuard is about, read onward here. </p> </div> </div> </a> <!-- Networking --> <a href=https://www.wireguard.com/protocol/ class=card-wrapper> <div class=card> <div class=logo> <span class=twemoji> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 576 512"><!-- Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M248 88h80v48h-80zm-8-56c-26.5 0-48 21.5-48 48v64c0 26.5 21.5 48 48 48h16v32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96v32h-16c-26.5 0-48 21.5-48 48v64c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48v-64c0-26.5-21.5-48-48-48h-16v-32h192v32h-16c-26.5 0-48 21.5-48 48v64c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48v-64c0-26.5-21.5-48-48-48h-16v-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H320v-32h16c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm208 344h8v48h-80v-48zm-256 0h8v48h-80v-48z"/></svg> </span> </div> <div class=card-content> <h5>Protocol & Cryptography</h5> <p> WireGuard uses state-of-the-art cryptography, like the Noise protocol framework, Curve25519, ChaCha20, Poly1305, BLAKE2, SipHash24, HKDF, and secure trusted constructions. </p> </div> </div> </a> <!-- Customize --> <a href=https://www.wireguard.com/install/ class=card-wrapper> <div class=card> <div class=logo> <span class=twemoji> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M224 0c35.3 0 64 21.5 64 48 0 10.4-4.4 20-12 27.9-6.6 6.9-12 15.3-12 24.9 0 15 12.2 27.2 27.2 27.2H336c26.5 0 48 21.5 48 48v44.8c0 15 12.2 27.2 27.2 27.2 9.5 0 18-5.4 24.9-12 7.9-7.5 17.5-12 27.9-12 26.5 0 48 28.7 48 64s-21.5 64-48 64c-10.4 0-20.1-4.4-27.9-12-6.9-6.6-15.3-12-24.9-12-15 0-27.2 12.2-27.2 27.2V464c0 26.5-21.5 48-48 48h-56.8c-12.8 0-23.2-10.4-23.2-23.2 0-9.2 5.8-17.3 13.2-22.8 11.6-8.7 18.8-20.7 18.8-34 0-26.5-28.7-48-64-48s-64 21.5-64 48c0 13.3 7.2 25.3 18.8 34 7.4 5.5 13.2 13.5 13.2 22.8 0 12.8-10.4 23.2-23.2 23.2H48c-26.5 0-48-21.5-48-48V343.2C0 330.4 10.4 320 23.2 320c9.2 0 17.3 5.8 22.8 13.2 8.7 11.6 20.7 18.8 34 18.8 26.5 0 48-28.7 48-64s-21.5-64-48-64c-13.3 0-25.3 7.2-34 18.8-5.5 7.4-13.5 13.2-22.8 13.2C10.4 256 0 245.6 0 232.8V176c0-26.5 21.5-48 48-48h108.8c15 0 27.2-12.2 27.2-27.2 0-9.5-5.4-18-12-24.9-7.5-7.9-12-17.5-12-27.9 0-26.5 28.7-48 64-48"/></svg> </span> </div> <div class=card-content> <h5>Client Installation</h5> <p> You may progress to installation and reading the quickstart instructions on how to use it. </p> </div> </div> </a> </div> </div> </div> </div> </div> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=. title="WireGuard Portal" class="md-nav__button md-logo" aria-label="WireGuard Portal" data-md-component=logo> <img src=assets/images/logo.svg alt=logo> </a> WireGuard Portal </label> <div class=md-nav__source> <a href=https://github.com/h44z/wg-portal title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 448 512"><!-- Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg> </div> <div class=md-source__repository> h44z/wg-portal </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type=checkbox id=__toc> <a href=. class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> Home </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex=0> <span class=md-ellipsis> Documentation </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Documentation </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=documentation/overview/ class=md-nav__link> <span class=md-ellipsis> Overview </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_2> <label class=md-nav__link for=__nav_2_2 id=__nav_2_2_label tabindex=0> <span class=md-ellipsis> Getting Started </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2_2> <span class="md-nav__icon md-icon"></span> Getting Started </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=documentation/getting-started/binaries/ class=md-nav__link> <span class=md-ellipsis> Binaries </span> </a> </li> <li class=md-nav__item> <a href=documentation/getting-started/docker/ class=md-nav__link> <span class=md-ellipsis> Docker </span> </a> </li> <li class=md-nav__item> <a href=documentation/getting-started/helm/ class=md-nav__link> <span class=md-ellipsis> Helm </span> </a> </li> <li class=md-nav__item> <a href=documentation/getting-started/sources/ class=md-nav__link> <span class=md-ellipsis> Sources </span> </a> </li> <li class=md-nav__item> <a href=documentation/getting-started/reverse-proxy/ class=md-nav__link> <span class=md-ellipsis> Reverse Proxy (HTTPS) </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_3> <label class=md-nav__link for=__nav_2_3 id=__nav_2_3_label tabindex=0> <span class=md-ellipsis> Configuration </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_3_label aria-expanded=false> <label class=md-nav__title for=__nav_2_3> <span class="md-nav__icon md-icon"></span> Configuration </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=documentation/configuration/overview/ class=md-nav__link> <span class=md-ellipsis> Overview </span> </a> </li> <li class=md-nav__item> <a href=documentation/configuration/examples/ class=md-nav__link> <span class=md-ellipsis> Examples </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_4> <label class=md-nav__link for=__nav_2_4 id=__nav_2_4_label tabindex=0> <span class=md-ellipsis> Usage </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_4_label aria-expanded=false> <label class=md-nav__title for=__nav_2_4> <span class="md-nav__icon md-icon"></span> Usage </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=documentation/usage/general/ class=md-nav__link> <span class=md-ellipsis> General </span> </a> </li> <li class=md-nav__item> <a href=documentation/usage/backends/ class=md-nav__link> <span class=md-ellipsis> Backends </span> </a> </li> <li class=md-nav__item> <a href=documentation/usage/ldap/ class=md-nav__link> <span class=md-ellipsis> LDAP </span> </a> </li> <li class=md-nav__item> <a href=documentation/usage/security/ class=md-nav__link> <span class=md-ellipsis> Security </span> </a> </li> <li class=md-nav__item> <a href=documentation/usage/webhooks/ class=md-nav__link> <span class=md-ellipsis> Webhooks </span> </a> </li> <li class=md-nav__item> <a href=documentation/rest-api/api-doc/ class=md-nav__link> <span class=md-ellipsis> REST API </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=documentation/upgrade/v1/ class=md-nav__link> <span class=md-ellipsis> Upgrade </span> </a> </li> <li class=md-nav__item> <a href=documentation/monitoring/prometheus/ class=md-nav__link> <span class=md-ellipsis> Monitoring </span> </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component=sidebar data-md-type=toc> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> </article> </div> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> </main> <!-- Application footer --> <footer class=md-footer> <!-- Further information --> <div class="md-footer-meta md-typeset" style="background-color: #fff;"> <div class="md-footer-meta__inner md-grid" style="background-color: #fff;"> <!-- Copyright and theme information --> <div class=md-footer-copyright> <div class=md-footer-copyright__highlight style="color: rgb(38, 38, 38);"> Copyright &copy; 2023-2025 WireGuard Portal Project </div> <div style="color: rgb(38, 38, 38);"> Made with <a href=https://squidfunk.github.io/mkdocs-material/ target=_blank rel=noopener style="color: black;"> Material for MkDocs </a> </div> </div> <!-- Social links --> <div class=md-social> <a href=https://github.com/h44z/wg-portal target=_blank rel=noopener title=github.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M202.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1M496 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2m-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3m-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1"/></svg> </a> <a href=https://hub.docker.com/r/wgportal/wg-portal target=_blank rel=noopener title=hub.docker.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 640 512"><!-- Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M349.9 236.3h-66.1v-59.4h66.1zm0-204.3h-66.1v60.7h66.1zm78.2 144.8H362v59.4h66.1zm-156.3-72.1h-66.1v60.1h66.1zm78.1 0h-66.1v60.1h66.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4.4 67.6.1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1zm78.1 0h-66.1v59.4h66.1zm-78.1-72.1h-66.1v60.1h66.1z"/></svg> </a> <a href=https://twitter.com/chris_h44z target=_blank rel=noopener title=twitter.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M459.4 151.7c.3 4.5.3 9.1.3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53C87.4 130.8 165 172.4 252.1 176.9c-1.6-7.8-2.6-15.9-2.6-24C249.5 95.1 296.3 48 354.4 48c30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3"/></svg> </a> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": ".", "features": ["content.code.copy", "navigation.instant", "navigation.tabs", "navigation.expand"], "search": "assets/javascripts/workers/search.973d3a69.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"default": "latest", "provider": "mike"}}</script> <script src=assets/javascripts/bundle.f55a23d4.min.js></script> <script src=javascript/img-comparison-slider.js></script> </body> </html>
\ No newline at end of file
diff --git a/master/theme-overrides/layouts/home.html b/master/theme-overrides/layouts/home.html
index 3ab842e..b9b654d 100644
--- a/master/theme-overrides/layouts/home.html
+++ b/master/theme-overrides/layouts/home.html
@@ -68,7 +68,7 @@
 }
 .tx-hero__image {
   max-width: 1000px;
-  min-width: 600px;
+  min-width: 0;
   width: 100%;
   height: auto;
   margin: 0 auto;
@@ -218,7 +218,7 @@
 
 .secondary-section .g .section .component-wrapper .responsive-grid .card {
   position: relative;
-  background-color:  #fff none repeat scroll 0% 0%;
+  background-color:  #fff;
   padding: 1.5rem;
   display: flex;
   flex-direction: row;
@@ -363,7 +363,6 @@
           <h1>A beautiful and simple UI to manage your WireGuard peers and interfaces</h1>
           <p>WireGuard Portal is an open source web-based user interface that makes it easy to setup and manage
             WireGuard VPN connections. It's built on top of WireGuard's official <span class="em">wgctrl</span> library.</p>
-          </p>
           <a
             href="documentation/overview/"
             title="Get Started"