diff --git a/.eleventy.js b/.eleventy.js
index e3a11382f..dc071626e 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -9,7 +9,7 @@ const cleanCSS = require("clean-css");
 const { EleventyRenderPlugin } = require("@11ty/eleventy");
 const Image = require("@11ty/eleventy-img");
 
-async function image(alt, filepath, darkpath, classes, lossless = true, sizes = "100vw") {
+async function image(alt, filepath, darkpath, classes, lossless = true, sizes = "100vw", lazy = true) {
   if (alt === undefined) {
     // You bet we throw an error on missing alt (alt="" works okay)
     throw new Error(`Missing \`alt\` on responsiveimage from: ${src}`);
@@ -63,12 +63,12 @@ async function image(alt, filepath, darkpath, classes, lossless = true, sizes =
       })
       .join("\n")}
       <img
-        class="${classes}"
+        class="${classes || ""}"
         src="${lowsrc.url}"
         width="${highsrc.width}"
         height="${highsrc.height}"
         alt="${alt}"
-        loading="lazy"
+        loading="${lazy ? "lazy" : "eager"}"${lazy ? "" : ' fetchpriority="high"'}
         decoding="async">
     </picture>`;
 }
diff --git a/src/_data/contributors.js b/src/_data/contributors.js
index bd92039a7..5e183750d 100644
--- a/src/_data/contributors.js
+++ b/src/_data/contributors.js
@@ -21,6 +21,11 @@ module.exports = async function () {
 		info.push([pages[i].avatar_url, pages[i].html_url])
 	}
 
+	info.push([
+		"https://avatars.githubusercontent.com/u/108166164?v=4",
+		"https://github.com/staFF6773"
+	]);
+
 	return {
 		users: info,
 	};
diff --git a/src/_includes/components/download.css b/src/_includes/components/download.css
index 9651c358c..732d0f8ec 100644
--- a/src/_includes/components/download.css
+++ b/src/_includes/components/download.css
@@ -1,69 +1,93 @@
+/* ============================================================
+   Download page
+   ============================================================ */
 .download-tab-list {
-    list-style: none;
-    display: flex;
-    justify-content: flex-start;
-    list-style: none;
-    padding: 0;
-    margin-bottom: 0;
-    border-radius: 1em 1em 0 0;
-    background-color: var(--accent);
-    flex-wrap: wrap;
-    overflow: hidden;
+  list-style: none;
+  display: flex;
+  justify-content: flex-start;
+  padding: 0;
+  margin: 0;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-bottom: 0;
+  flex-wrap: wrap;
+  overflow: hidden;
 }
 
 .download-tab-list li {
-    flex-grow: 1;
-    display: block;
+  flex-grow: 1;
+  display: block;
 }
 
 .download-tab-list a {
-    color: var(--primary-text);
-    font-size: 1.2em;
-    text-decoration: none;
-    display: flex;
-    justify-content: center;
-    padding: 0.75em 0.5em;
+  color: var(--color-text-muted);
+  font-size: 1rem;
+  font-weight: 600;
+  text-decoration: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-md) var(--space-sm);
+  transition: background-color var(--transition-fast), color var(--transition-fast);
 }
 
-.download-tab-list a:hover {
-    background-color: var(--accent-light);
+.download-tab-list a:visited {
+  color: var(--color-text-muted);
+}
+
+.download-tab-list a:hover,
+.download-tab-list a:focus-visible {
+  background-color: var(--color-surface-elevated);
+  color: var(--color-text);
+  text-decoration: none;
 }
 
 .download-tab-list i {
-    color: var(--primary-text);
-    font-size: 1.2em;
-    text-decoration: none;
-    display: flex;
-    justify-content: center;
-    margin-right: 0.25em;
+  font-size: 1.2em;
+}
+
+.download-tab-active a,
+.download-tab-active a:visited {
+  background-color: var(--color-bg);
+  color: var(--primary);
 }
 
-.download-tab-active a {
-    background-color: var(--background);
+.download-tab-active a:hover,
+.download-tab-active a:focus-visible {
+  color: var(--primary-hover);
 }
 
 .download-content {
-    background-color: var(--background);
-    padding: 1em;
-    border-radius: 0 0 1em 1em;
+  background-color: var(--color-bg);
+  padding: var(--space-lg);
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  border: 1px solid var(--color-border);
+  border-top: 0;
 }
 
 .download-content .column div {
-    width: 100%;
+  width: 100%;
 }
 
-.download-content .button, .button-disabled {
-    width: 100%;
-    display: block;
-    margin-bottom: 1em;
-    margin-left: 0;
+.download-content .button,
+.download-content .button-disabled {
+  width: 100%;
+  display: block;
+  margin: 0 0 var(--space-md) 0;
+}
+
+.download-content .button:last-child {
+  margin-bottom: 0;
 }
 
 @media (min-width: 64em) {
-    .download-tab-list a {
-        border-radius: 1rem 1rem 0 0;
-    }
-    .download-content .column div {
-        width: 80%;
-    }
-}
\ No newline at end of file
+  .download-tab-list a {
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+  }
+
+  .download-content .column div {
+    width: 80%;
+  }
+}
diff --git a/src/_includes/components/header.css b/src/_includes/components/header.css
index 7b4ef796f..aaf7e0e6f 100644
--- a/src/_includes/components/header.css
+++ b/src/_includes/components/header.css
@@ -1,26 +1,56 @@
-header:after {
+/* ============================================================
+   Header & navigation
+   ============================================================ */
+header::after {
   content: "";
   display: table;
   clear: both;
 }
 
+.hero-head {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
 .home {
-  color: var(--primary-text);
-  height: 3.5em;
+  color: #ffffff;
+  height: 2.75rem;
+  width: auto;
+  display: block;
+  transition: transform var(--transition-fast);
+}
+
+.home:hover {
+  transform: scale(1.03);
 }
 
-.home :link:not(:hover) {
+.home-link,
+.home-link:visited {
+  color: inherit;
   text-decoration: none;
 }
 
-/* Nav */
+.home-link:hover,
+.home-link:focus-visible {
+  text-decoration: none;
+}
+
+/* Nav wrapper */
 nav {
-  padding: 0.5em;
-  overflow: auto;
+  width: min(100% - var(--space-lg) * 2, var(--container-max));
+  margin-inline: auto;
+  padding: var(--space-sm) var(--space-md);
   display: flex;
   justify-content: center;
-  background-color: var(--background);
-  border-radius: 0 0 1em 1em;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-sm) var(--space-md);
+  background-color: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
 }
 
 .nav {
@@ -28,7 +58,10 @@ nav {
   margin: 0;
   display: flex;
   justify-content: center;
+  align-items: center;
   flex-wrap: wrap;
+  gap: var(--space-xs) var(--space-sm);
+  list-style: none;
 }
 
 .navbar,
@@ -38,21 +71,7 @@ nav {
   justify-content: center;
   padding: 0;
   flex-wrap: wrap;
-}
-
-.social-links i {
-  font-size: 1.75em;
-  margin: 0.25em;
-  color: var(--primary-text);
-}
-
-.social-links i:hover {
-  color: var(--primary);
-  cursor: pointer;
-}
-
-.links .button {
-  font-size: 1.2em;
+  gap: var(--space-sm);
 }
 
 .navbar {
@@ -61,29 +80,120 @@ nav {
 
 .nav-item {
   display: inline-block;
-  font-size: 1.2em;
-  margin: 0.5em;
+  font-size: 1rem;
+  font-weight: 500;
 }
 
 .nav-item a {
-  color: var(--primary-text);
+  color: #ffffff;
+  text-decoration: none;
+  padding: 0.35em 0.65em;
+  border-radius: var(--radius-pill);
+  transition: background-color var(--transition-fast), color var(--transition-fast);
+}
+
+.nav-item a:visited {
+  color: #ffffff;
+}
+
+.nav-item a:hover,
+.nav-item a:focus-visible {
+  background-color: rgba(255, 255, 255, 0.15);
+  color: #ffffff;
   text-decoration: none;
 }
 
-.nav-item-active {
+.nav-item-active a {
+  background-color: var(--primary);
+  color: #ffffff;
   font-weight: 700;
-  font-size: 1.25em;
 }
 
+.nav-item-active a:hover,
+.nav-item-active a:focus-visible {
+  background-color: var(--primary-hover);
+  color: #ffffff;
+}
+
+/* Social links */
+.social-links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+}
+
+.social-links a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: var(--radius-pill);
+  color: #ffffff;
+  transition: background-color var(--transition-fast), color var(--transition-fast);
+}
+
+.social-links a:visited {
+  color: #ffffff;
+}
+
+.social-links a:hover,
+.social-links a:focus-visible {
+  background-color: rgba(255, 255, 255, 0.15);
+  color: var(--primary-hover);
+  text-decoration: none;
+}
+
+.social-links i {
+  font-size: 1.25rem;
+}
+
+.links .button {
+  font-size: 0.95rem;
+}
+
+/* Hero */
 .hero {
   position: relative;
-  color: white;
+  color: #ffffff;
   z-index: 0;
+  overflow: hidden;
+  min-height: 55vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
+/* Hero text floats directly over the photographic background */
+.hero-body {
+  padding: var(--space-2xl) var(--space-lg) var(--space-2xl);
+}
 
 .hero-title {
-  font-size: 3em;
+  font-size: clamp(2.5rem, 6vw, 4rem);
+  font-weight: 800;
+  margin-bottom: var(--space-md);
+  color: #ffffff;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
+}
+
+.hero-description {
+  text-align: center;
+  max-width: 60ch;
+  margin-inline: auto;
+}
+
+.hero-description .subtitle {
+  color: #ffffff;
+  margin-bottom: var(--space-lg);
+  max-width: 55ch;
+  margin-inline: auto;
+  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
+}
+
+.hero-description .button {
+  margin: var(--space-sm);
 }
 
 header .container {
@@ -97,6 +207,7 @@ header .links {
 @media (min-width: 64em) {
   nav {
     justify-content: space-between;
+    padding: var(--space-sm) var(--space-lg);
   }
 
   .navbar {
@@ -106,7 +217,17 @@ header .links {
   header .container {
     flex-direction: row;
   }
+
   header .links {
     flex-direction: row;
   }
-}
\ No newline at end of file
+
+  .hero-description {
+    text-align: left;
+    margin-inline: 0;
+  }
+
+  .hero-description .subtitle {
+    margin-inline: 0;
+  }
+}
diff --git a/src/_includes/components/news.css b/src/_includes/components/news.css
index 653b658be..dd0f80b51 100644
--- a/src/_includes/components/news.css
+++ b/src/_includes/components/news.css
@@ -1,26 +1,34 @@
-/* Posts list */
+/* ============================================================
+   Posts list
+   ============================================================ */
 .postlist {
   list-style: none;
   padding: 0;
+  margin: 0;
 }
 
 .postlist-item {
-  background-color: var(--background);
-  border-radius: 1em;
-  padding: 1em;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-lg);
   display: flex;
   flex-wrap: wrap;
-  align-items: baseline;
+  align-items: center;
+  gap: var(--space-sm);
   counter-increment: start-from -1;
   line-height: 1.8;
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
 }
 
-.postlist :first-child {
-  margin-top: 0;
+.postlist-item:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
 }
 
-.postlist {
-  margin-top: 0;
+.postlist-item:not(:first-child) {
+  margin-top: var(--space-lg);
 }
 
 .postlist-item:before {
@@ -34,16 +42,8 @@
 .postlist-date,
 .postlist-item:before {
   font-size: 0.8125em;
-  /* 13px /16 */
-  color: var(--darkgray);
-}
-
-.postlist-item:not(:first-child) {
-  margin-top: 2em;
-}
-
-.postlist-date {
-  word-spacing: -0.5px;
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
 }
 
 .postlist-link {
@@ -53,22 +53,24 @@
   text-underline-position: from-font;
   text-underline-offset: 0;
   text-decoration-thickness: 1px;
+  font-weight: 600;
 }
 
 .postlist-item-active .postlist-link {
-  font-weight: 500;
+  font-weight: 700;
 }
 
 .postlist-description {
   width: 100%;
   border-left: var(--primary) 0.25em solid;
-  padding: 0.5em;
-  margin-top: 0.33em;
+  padding: var(--space-sm) var(--space-md);
+  margin-top: var(--space-sm);
+  background-color: var(--color-surface-elevated);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 }
 
 .tmpl-home .postlist-link {
   font-size: 1.1875em;
-  /* 19px /16 */
   font-weight: 700;
 }
 
@@ -79,15 +81,15 @@
   justify-content: center;
   text-transform: uppercase;
   font-size: 0.75em;
-  /* 12px /16 */
-  padding: 0.08333333333333em 0.3333333333333em;
-  margin-left: 1em;
-  color: var(--primary-text);
-  border: 1px solid var(--accent);
-  border-radius: 0.25em;
-  /* 3px /12 */
+  padding: 0.1em 0.4em;
+  margin-left: 0.5em;
+  color: var(--color-text);
+  background-color: var(--color-surface-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
   text-decoration: none;
   line-height: 1.8;
+  transition: background-color var(--transition-fast), color var(--transition-fast);
 }
 
 a.post-tag,
@@ -96,10 +98,21 @@ a.post-tag:visited {
 }
 
 a.post-tag:hover,
-a.post-tag:focus {
-  background-color: var(--lightgray);
+a.post-tag:focus-visible {
+  background-color: var(--primary-hover);
+  border-color: var(--primary-hover);
+  color: #ffffff;
+  text-decoration: none;
 }
 
 .postlist-item>.post-tag {
   align-self: center;
-}
\ No newline at end of file
+}
+
+/* Post page date */
+.tmpl-post time {
+  display: block;
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  margin-bottom: var(--space-md);
+}
diff --git a/src/_includes/components/users.css b/src/_includes/components/users.css
index 98d2e0886..ecff5ff13 100644
--- a/src/_includes/components/users.css
+++ b/src/_includes/components/users.css
@@ -1,60 +1,82 @@
+/* ============================================================
+   User lists (maintainers / contributors)
+   ============================================================ */
 .user-list {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: space-around;
-    list-style: none;
-    padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: space-around;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  gap: var(--space-md);
 }
 
 .user-info {
-    position: relative; 
-    margin: 0.5em;
-    width: 10em;
-    border-radius: 1em;
-    overflow: hidden;
-    background-color:var(--background);
-    text-decoration: none;
-    color: var(--primary-text);
-    max-height: 10em;
+  position: relative;
+  width: 10em;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background-color: var(--color-surface);
+  text-decoration: none;
+  color: var(--color-text);
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
+}
+
+.user-info:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
 }
 
 .user-contrib {
-    width: 3em;
-    background-color: var(--accent);
+  width: 4em;
+  border-radius: var(--radius-md);
 }
 
-.user-contrib:hover {
-    border: 0.2em solid var(--primary);
+.user-info img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
 
+.user-info a {
+  color: inherit;
+  text-decoration: none;
 }
 
-.user-info img {
-    display: block;
-    width: 100%;
-    height: auto;
+.user-info a:hover,
+.user-info a:focus-visible {
+  text-decoration: none;
 }
 
 .user-name {
-    color: white;
-    font-size: 1.2em;
-    overflow-wrap: break-word;
-    text-align: center;
+  color: #ffffff;
+  font-size: 1.1em;
+  font-weight: 700;
+  overflow-wrap: break-word;
+  text-align: center;
+  padding: var(--space-sm);
 }
 
 .user-info-overlay {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    opacity: 0;
-    transition: .3s ease;
-    background-color: var(--primary);
-}
-
-.user-info:hover .user-info-overlay {
-    opacity: 1;
-}
\ No newline at end of file
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  transition: opacity var(--transition-base);
+  background-color: color-mix(in srgb, var(--primary) 92%, transparent);
+}
+
+.user-info:hover .user-info-overlay,
+.user-info:focus-within .user-info-overlay {
+  opacity: 1;
+}
+
+.user-contrib:hover {
+  border: 0.15em solid var(--primary);
+}
diff --git a/src/_includes/components/wiki.css b/src/_includes/components/wiki.css
index 4cb5afa1d..7da63c879 100644
--- a/src/_includes/components/wiki.css
+++ b/src/_includes/components/wiki.css
@@ -1,43 +1,63 @@
-.wiki-content, .wiki-toc {
-  margin-top: 1em;
+/* ============================================================
+   Wiki layout
+   ============================================================ */
+.wiki-main {
+  width: 100%;
+  max-width: var(--container-max);
+  margin-left: 0;
+  margin-right: auto;
+  padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
+}
+
+.wiki-layout {
+  display: grid;
+  grid-template-areas: "content" "toc";
+  gap: var(--space-lg);
+}
+
+.wiki-layout .wiki-content,
+.wiki-layout .wiki-toc {
+  margin-top: 0;
 }
 
 .wiki-toc {
-  background-color: var(--accent);
-  border-radius: 1em;
-  padding: 1em;
-  font-size: 1rem;
-  /* Reset */
-  flex: 1;
+  grid-area: toc;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-md);
+  box-shadow: var(--shadow-md);
+  font-size: 0.95rem;
+}
+
+.wiki-content {
+  grid-area: content;
+  min-width: 0;
 }
 
 .wiki-toc-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  padding-left: 0;
-  padding-right: 0;
+  padding: 0;
   margin: 0;
   list-style: none;
+  gap: var(--space-sm);
 }
 
 .wiki-toc-list li {
-  line-height: 1.466666666667;
-  /* 22px /15 */
+  line-height: 1.55;
 }
 
 /* Nested lists */
 .wiki-toc-list ul {
-  padding: 0 0 0.75em 0;
+  padding: 0 0 0.5rem 0;
   margin: 0;
   list-style: none;
 }
 
-/* Menus nested 2 or more deep */
 .wiki-toc-list ul ul {
-  padding-bottom: 0;
-  padding-left: 0.625rem;
-  /* 10px /16 */
+  padding-left: 0.75rem;
 }
 
 /* Hide inactive menus 3 or more deep */
@@ -45,39 +65,44 @@
   display: none;
 }
 
-/* List items */
-.wiki-toc-list a {
-  padding: 0.15em 0.25em;
+/* Links */
+.wiki-toc-list a,
+.wiki-toc-list a:visited {
+  padding: 0.2em 0.35em;
   display: block;
-}
-
-.wiki-toc-list a:not(:hover) {
+  border-radius: var(--radius-sm);
+  color: #ffffff;
   text-decoration: none;
+  transition: color var(--transition-fast), background-color var(--transition-fast);
 }
 
-.wiki-toc-list li {
-  margin: 0;
-  padding: 0;
+.wiki-toc-list a:hover,
+.wiki-toc-list a:focus-visible {
+  color: var(--link-hover);
+  background-color: var(--color-surface-elevated);
+  text-decoration: none;
 }
 
 .wiki-toc-list>li {
   flex-grow: 1;
-  flex-basis: 14.375rem;
-  /* 230px /16 */
+  flex-basis: 14rem;
 }
 
 /* Top level links */
-.wiki-toc-list>li>a {
-  color: var(--primary-text);
+.wiki-toc-list>li>a,
+.wiki-toc-list>li>a:visited {
+  color: #ffffff;
   font-weight: 700;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--color-border);
   margin-bottom: 0.25em;
-  /* 4px /16 */
+  padding-bottom: 0.25em;
 }
 
 /* Active links */
 .wiki-toc-list li.wiki-toc-active>a {
-  background-color: var(--accent);
+  background-color: var(--color-surface-elevated);
+  color: var(--primary);
+  font-weight: 700;
 }
 
 /* Show only active nested lists */
@@ -86,13 +111,14 @@
   display: block;
 }
 
-/* Footer catgory navigation */
+/* Footer category navigation */
 .wiki-cat-list-active {
   font-weight: 700;
 }
 
 .inlinelist {
   padding: 0;
+  list-style: none;
 }
 
 .inlinelist-no-nest ul,
@@ -108,30 +134,82 @@
   display: inline-flex;
   text-transform: uppercase;
   font-size: 0.75em;
-  /* 12px /16 */
-  padding: 0.08333333333333em 0.3333333333333em;
-  margin: 0.5em 0.5em 0.5em 0;
-  color: var(--primary-text);
-  border: 1px solid var(--accent);
-  border-radius: 0.25em;
-  /* 3px /12 */
+  padding: 0.1em 0.4em;
+  margin: 0.25em 0.5em 0.25em 0;
+  color: var(--color-text);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
   text-decoration: none;
   line-height: 1.8;
 }
 
 .wiki-tag:hover a {
-  text-decoration: underline;
+  background-color: var(--color-surface-elevated);
+  color: var(--link-hover);
+  text-decoration: none;
 }
 
 .wiki-tag-active a {
-  font-weight: 700;
+  background-color: var(--primary);
+  color: #ffffff;
+  border-color: var(--primary);
+}
+
+.wiki-tag-active a:hover {
+  background-color: var(--primary-hover);
+  border-color: var(--primary-hover);
+  color: #ffffff;
+}
+
+.wiki-content .wiki-tag a:visited {
+  color: var(--color-text);
+}
+
+.wiki-content .wiki-tag-active a:visited {
+  color: #ffffff;
+}
+
+/* Light mode: keep sidebar links readable on light surfaces */
+@media (prefers-color-scheme: light) {
+  .wiki-toc-list a,
+  .wiki-toc-list a:visited,
+  .wiki-toc-list>li>a,
+  .wiki-toc-list>li>a:visited {
+    color: var(--color-text);
+  }
 }
 
 @media (min-width: 64em) {
+  .wiki-layout {
+    grid-template-columns: 18rem minmax(0, 1fr);
+    grid-template-areas: "toc content";
+    align-items: start;
+  }
+
   .wiki-content {
-    width: 80%
+    width: auto;
+    flex: none;
   }
+
   .wiki-toc {
-    margin-right: 1em;
+    width: auto;
+    max-width: none;
+    margin-right: 0;
+    position: sticky;
+    top: calc(var(--header-height) + var(--space-md));
+    align-self: start;
+    max-height: calc(100vh - var(--header-height) - var(--space-md));
+    overflow-y: auto;
+  }
+
+  .wiki-toc-list {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .wiki-toc-list>li {
+    flex-basis: auto;
+    margin-bottom: var(--space-sm);
   }
-}
\ No newline at end of file
+}
diff --git a/src/_includes/index.css b/src/_includes/index.css
index 063f38ce1..a49f4fc91 100644
--- a/src/_includes/index.css
+++ b/src/_includes/index.css
@@ -1,314 +1,564 @@
-/* Colors */
+/* ============================================================
+   PolyMC design tokens
+   ============================================================ */
 :root {
-  --grad-primary: linear-gradient(126deg, #88b858 0%, #72b147 25%, #5a9a30 50%);
-  --grad-secondary: linear-gradient(126deg, #b7835a 0%, #765338 25%, #5b422d 50%);
-  --grad-disabled: linear-gradient(126deg, #969696 0%, #cecece 25%, #bebebe 50%);
+  /* Brand colors */
   --primary: #88b858;
+  --primary-hover: #9ed06d;
+  --primary-active: #72b147;
+  --primary-deep: #5a9a30;
   --secondary: #a87953;
-  --background: #333333;
-  --accent: #444444;
-  --accent-light: #555555;
-  --link: #88b858ff;
-  --visited: #72b147ff;
-  --primary-text: #ffffff;
-  --code: #222;
-  background-color: var(--background);
+  --secondary-hover: #c4916a;
+  --secondary-active: #765338;
+  --secondary-deep: #5b422d;
+
+  /* Gradients */
+  --grad-primary: linear-gradient(126deg, var(--primary) 0%, var(--primary-active) 25%, var(--primary-deep) 50%);
+  --grad-primary-hover: linear-gradient(126deg, var(--primary-hover) 0%, var(--primary) 25%, var(--primary-active) 50%);
+  --grad-primary-active: linear-gradient(126deg, var(--primary-active) 0%, var(--primary-deep) 25%, var(--primary-deep) 50%);
+  --grad-secondary: linear-gradient(126deg, var(--secondary-hover) 0%, var(--secondary-active) 25%, var(--secondary-deep) 50%);
+  --grad-secondary-hover: linear-gradient(126deg, var(--secondary-hover) 0%, var(--secondary-hover) 25%, var(--secondary-active) 50%);
+  --grad-secondary-active: linear-gradient(126deg, var(--secondary-active) 0%, var(--secondary-deep) 25%, var(--secondary-deep) 50%);
+  --grad-disabled: linear-gradient(126deg, #969696 0%, #cecece 25%, #bebebe 50%);
+
+  /* Light/dark surfaces */
+  --color-bg: #1c1c1e;
+  --color-surface: #2c2c2e;
+  --color-surface-elevated: #3a3a3c;
+  --color-border: rgba(255, 255, 255, 0.1);
+
+  /* Text */
+  --color-text: #f5f5f7;
+  --color-text-muted: #a1a1aa;
+  --color-text-inverse: #1c1c1e;
+
+  /* Semantic */
+  --link: var(--primary);
+  --link-hover: var(--primary-hover);
+  --visited: #72b147;
+  --code: #111113;
+  --warning-bg: #2c2a1e;
+  --warning-text: #f5eac1;
+
+  /* Spacing scale */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2.5rem;
+  --space-2xl: 4rem;
+
+  /* Border radius */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
+  --radius-pill: 999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.35);
+
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-base: 250ms ease;
+
+  /* Layout */
+  --container-max: 90rem;
+  --content-max: 75rem;
+  --header-height: 4rem;
+
+  color-scheme: dark light;
+  background-color: var(--color-bg);
+  color: var(--color-text);
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    --primary-text: #333;
-    --background: #ffffff;
-    --accent: #e0e0e0;
-    --accent-light: #d0d0d0;
+    --color-bg: #f5f5f7;
+    --color-surface: #ffffff;
+    --color-surface-elevated: #e5e5ea;
+    --color-border: rgba(0, 0, 0, 0.08);
+
+    --color-text: #1c1c1e;
+    --color-text-muted: #636366;
+    --color-text-inverse: #ffffff;
+
+    --link: #5a9a30;
+    --link-hover: #3f6d20;
+    --visited: #4a7f28;
+    --code: #f0f0f2;
+    --warning-bg: #fffbe6;
+    --warning-text: #5c4b10;
+
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
   }
 }
 
-/* Global stylesheet */
-* {
+/* ============================================================
+   Reset & base
+   ============================================================ */
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
-html,
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   padding: 0;
   margin: 0;
-  font-family: "Inter", -apple-system, system-ui, sans-serif;
-  color: var(--primary-text);
-}
-
-.background {
-  top: 0;
-  pointer-events: none;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  filter: brightness(50%);
-  z-index: -1;
-}
-
-* {
-  box-sizing: border-box;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transition: color var(--transition-fast), background-color var(--transition-fast);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
 }
 
-p:last-child {
-  margin-bottom: 0;
+h1 img,
+h2 img,
+h3 img,
+h4 img,
+h5 img,
+h6 img {
+  display: inline-block;
+  height: 20px;
+  width: auto;
+  vertical-align: middle;
 }
 
-p,
-.tmpl-post li,
-img,
 iframe {
-  max-width: min(100%);
+  max-width: 100%;
 }
 
 p,
 .tmpl-post li {
-  line-height: 1.45;
+  line-height: 1.65;
+}
+
+p:last-child {
+  margin-bottom: 0;
 }
 
 a {
   color: var(--link);
+  text-decoration: none;
+  transition: color var(--transition-fast);
 }
 
-table {
-  margin: 1em 0;
+a:hover,
+a:focus-visible {
+  color: var(--link-hover);
+  text-decoration: underline;
 }
 
-table td,
-table th {
-  padding-right: 1em;
+a:visited {
+  color: var(--visited);
 }
 
-blockquote {
-  border-left: var(--primary) 0.25em solid;
-  padding: 0.5em;
-  margin: 0;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 0 var(--space-md);
+  line-height: 1.2;
+  font-weight: 700;
 }
 
-pre,
-code {
-  font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono",
-    "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
-    "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L",
-    "Courier New", Courier, monospace;
-  line-height: 1.5;
-  border-radius: 1em;
+h1 {
+  font-size: clamp(2rem, 5vw, 3rem);
 }
 
-.top {
-  margin-top: 1em;
+h2 {
+  font-size: clamp(1.5rem, 4vw, 2rem);
 }
 
-pre {
-  font-size: 14px;
-  line-height: 1.375;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  -moz-tab-size: 2;
-  -o-tab-size: 2;
-  tab-size: 2;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-  padding: 1em;
-  margin: 0.5em 0;
-  background-color: var(--code);
-  color: white;
-  overflow: auto;
+h3 {
+  font-size: clamp(1.25rem, 3vw, 1.5rem);
 }
 
-code {
-  word-break: break-all;
-  color: white;
-  background-color: var(--code);
+h4 {
+  font-size: 1.125rem;
 }
 
-.highlight-line {
-  display: block;
-  padding: 0.125em 1em;
-  text-decoration: none;
-  /* override del, ins, mark defaults */
-  color: inherit;
-  /* override del, ins, mark defaults */
+/* ============================================================
+   Layout helpers
+   ============================================================ */
+.container {
+  width: min(100% - var(--space-lg) * 2, var(--container-max));
+  margin-inline: auto;
+  position: relative;
 }
 
-/* allow highlighting empty lines */
-.highlight-line:empty:before {
-  content: " ";
+main.container {
+  padding-block: var(--space-lg);
 }
 
-/* avoid double line breaks when using display: block; */
-.highlight-line+br {
-  display: none;
+.content {
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-lg);
+  box-shadow: var(--shadow-md);
 }
 
-.highlight-line-isdir {
-  color: #b0b0b0;
-  background-color: #222;
+.content>:first-child {
+  margin-top: 0;
 }
 
-.highlight-line-active {
-  background-color: #444;
-  background-color: hsla(0, 0%, 27%, 0.8);
+.top {
+  margin-top: var(--space-lg);
 }
 
-.highlight-line-add {
-  background-color: #45844b;
+.center {
+  text-align: center;
+  margin: auto;
 }
 
-.highlight-line-remove {
-  background-color: #902f2f;
+/* ============================================================
+   Background images
+   ============================================================ */
+.background {
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: brightness(50%);
+  z-index: 0;
 }
 
-.container {
-  max-width: 90em;
-  margin: 0 auto;
+/* Keep page content above the fixed background image */
+body > header,
+body > main,
+body > footer {
   position: relative;
+  z-index: 1;
 }
 
-.content {
-  background-color: var(--background);
-  border-radius: 1em;
-  padding: 1em;
-  -webkit-backdrop-filter: blur(2em);
-  backdrop-filter: blur(10px);
+/* ============================================================
+   Infobox / cards
+   ============================================================ */
+.infobox {
+  background-color: var(--color-surface-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-lg);
+  box-shadow: var(--shadow-md);
 }
 
-.center {
+.infobox hr {
+  border: 0;
+  border-top: 1px solid var(--color-border);
+  margin: var(--space-lg) 0;
+}
+
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+}
+
+.card {
+  flex: 1 1 16rem;
+  padding: var(--space-lg);
   text-align: center;
-  margin: auto;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
 }
 
-.infobox {
-  background-color: var(--accent);
-  padding: 1em;
-  border-radius: 1em;
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
 }
 
+.card .button,
+.card .button-disabled {
+  width: 100%;
+  margin: 0;
+}
+
+/* ============================================================
+   Buttons
+   ============================================================ */
+.button,
 .button-disabled {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
-  color: white;
-  padding: 0.5em 1.5em;
+  isolation: isolate;
+  color: #ffffff;
+  padding: 0.55em 1.6em;
   margin: 0.25em;
-  list-style: none;
-  font-size: 1.2em;
-  font-family: "Inter", sans-serif;
+  font-size: 1.05rem;
+  font-family: inherit;
   font-weight: 600;
   text-decoration: none;
-  background-color: var(--primary);
-  background-image: var(--grad-disabled);
-  background-size: 200%;
+  background-image: var(--grad-primary);
+  border: 0;
+  cursor: pointer;
   clip-path: polygon(0.6em 0,
       calc(100% - 0.6em) 0,
       100% 50%,
       calc(100% - 0.6em) 100%,
       0.6em 100%,
       0 50%);
-  transition: 250ms ease;
-  background-position-x: 100%;
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
 }
 
-.button {
-  display: inline-block;
-  position: relative;
-  color: white;
-  padding: 0.5em 1.5em;
-  margin: 0.25em;
-  list-style: none;
-  font-size: 1.2em;
-  font-family: "Inter", sans-serif;
-  font-weight: 600;
+.button::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: var(--grad-primary-hover);
+  opacity: 0;
+  z-index: -1;
+  transition: opacity var(--transition-base);
+}
+
+.button:hover,
+.button:focus-visible {
+  color: #ffffff;
   text-decoration: none;
-  background-color: var(--primary);
-  background-image: var(--grad-primary);
-  background-size: 200%;
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.button:hover::before,
+.button:focus-visible::before {
+  opacity: 1;
+}
+
+.button:active {
+  transform: translateY(0);
+}
+
+.button:active::before {
+  background-image: var(--grad-primary-active);
+  opacity: 1;
+}
+
+.button.secondary {
+  background-image: var(--grad-secondary);
+}
+
+.button.secondary::before {
+  background-image: var(--grad-secondary-hover);
+}
+
+.button.secondary:active::before {
+  background-image: var(--grad-secondary-active);
+}
+
+.button:visited,
+.button:visited:hover {
+  color: #ffffff;
+}
+
+.button-disabled {
+  cursor: not-allowed;
+  background-image: var(--grad-disabled);
+  opacity: 0.85;
+}
+
+.is-big {
+  font-size: 1.25rem;
+  padding: 0.65em 1.6em;
+}
+
+/* Hexagonal accent button (hero CTA only) */
+.button-hex {
   clip-path: polygon(0.6em 0,
       calc(100% - 0.6em) 0,
       100% 50%,
       calc(100% - 0.6em) 100%,
       0.6em 100%,
       0 50%);
-  transition: 250ms ease;
-  background-position-x: 100%;
+  padding-inline: 1.8em;
 }
 
-.button:hover,
-.button:focus {
-  background-position-x: 0%;
-  /* slide the gradient */
+/* ============================================================
+   Tables
+   ============================================================ */
+table {
+  margin: 1em 0;
+  border-collapse: collapse;
+  width: 100%;
 }
 
-.button {
-  color: white;
+table td,
+table th {
+  padding: 0.625em 1em 0.625em 0;
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
 }
 
-.is-big {
-  font-size: 1.5em;
+/* ============================================================
+   Blockquotes
+   ============================================================ */
+blockquote {
+  border-left: var(--primary) 0.25em solid;
+  background-color: var(--color-surface);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  padding: var(--space-md);
+  margin: 0 0 var(--space-md);
 }
 
-.button.secondary {
-  background-color: var(--secondary);
-  background-image: var(--grad-secondary);
+/* ============================================================
+   Code
+   ============================================================ */
+pre,
+code {
+  font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono",
+    "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
+    "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L",
+    "Courier New", Courier, monospace;
+  line-height: 1.6;
+  border-radius: var(--radius-md);
 }
 
-/* Warning */
+pre {
+  font-size: 14px;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  -moz-tab-size: 2;
+  -o-tab-size: 2;
+  tab-size: 2;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  padding: var(--space-md);
+  margin: var(--space-md) 0;
+  background-color: var(--code);
+  color: var(--color-text);
+  overflow: auto;
+  border: 1px solid var(--color-border);
+}
+
+code {
+  word-break: break-word;
+  color: var(--color-text);
+  background-color: var(--code);
+  padding: 0.15em 0.35em;
+  font-size: 0.92em;
+}
+
+pre code {
+  padding: 0;
+  background: transparent;
+}
+
+/* ============================================================
+   Warning / notification
+   ============================================================ */
 .warning {
-  background-color: #ffc;
-  padding: 1em 0.625em;
-  /* 16px 10px /16 */
+  background-color: var(--warning-bg);
+  color: var(--warning-text);
+  padding: var(--space-md) var(--space-lg);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-md);
+  border: 1px solid var(--color-border);
 }
 
-.warning ol:only-child {
-  margin: 0;
+.warning a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.notification {
+  position: relative;
+  padding: var(--space-md) var(--space-lg);
+  margin-bottom: var(--space-md);
+  border-radius: var(--radius-md);
+  background-color: var(--primary);
+  color: #ffffff;
 }
 
-/* Direct Links / Markdown Headers */
+.notification a {
+  color: #ffffff;
+  text-decoration: underline;
+}
+
+/* ============================================================
+   Direct links in headers
+   ============================================================ */
 .direct-link {
   text-decoration: none;
   font-style: normal;
-  margin-left: .1em;
+  margin-left: 0.25em;
+  font-weight: 400;
+  font-size: 0.7em;
+  vertical-align: middle;
+  opacity: 0.7;
 }
 
 a.direct-link,
 a.direct-link:visited {
-  color: transparent;
+  color: var(--color-text-muted);
 }
 
-a.direct-link:focus,
-a.direct-link:focus:visited,
+a.direct-link:focus-visible,
 :hover>a.direct-link,
 :hover>a.direct-link:visited {
-  color: #aaa;
+  color: var(--link-hover);
 }
 
+/* ============================================================
+   Download links list
+   ============================================================ */
 .download-links {
   padding: 0;
+  list-style: none;
 }
 
 .download-links li {
-  display: inline;
+  display: inline-block;
   margin: 0.25em;
 }
 
-/* Landing page */
-
+/* ============================================================
+   Landing page rows / columns
+   ============================================================ */
 .row {
   display: flex;
   flex-direction: column;
+  gap: var(--space-lg);
+  align-items: center;
 }
 
 .column {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1em;
+  padding: var(--space-md);
   text-align: center;
 }
 
@@ -317,57 +567,36 @@ a.direct-link:focus:visited,
 }
 
 .subtitle {
-  font-size: 1.5em;
+  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
   text-align: center;
+  color: var(--color-text-muted);
+  line-height: 1.55;
+  max-width: 50ch;
+  margin-inline: auto;
 }
 
-/* card */
-.cards {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  gap: 1em;
-}
-
-.card {
-  flex: 1;
-  padding: 1em;
+/* ============================================================
+   Footer
+   ============================================================ */
+.footer {
   text-align: center;
-  background-color: var(--accent);
-}
-
-.card .button {
-  width: 100%;
-  margin: 0;
-}
-
-/* Notifications */
-.notification {
-  position: relative;
-  padding: 1.25rem 2.5rem 1.25rem 1.5rem;
-  margin-bottom: 1em;
+  padding: var(--space-xl) var(--space-lg);
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
 }
 
-.notification.is-info {
-  background-color: var(--primary);
-  color: white;
+.footer a {
+  color: var(--color-text-muted);
 }
 
-.notification a {
-  color: white;
-}
-
-/* footer */
-.footer {
-  text-align: center;
-  padding: 2em;
-  color: #fff;
+.footer a:hover {
+  color: var(--link-hover);
 }
 
-
+/* ============================================================
+   Media queries (desktop)
+   ============================================================ */
 @media (min-width: 64em) {
-
-  /* landing page */
   .row {
     flex-direction: row;
   }
@@ -376,20 +605,25 @@ a.direct-link:focus:visited,
     flex-direction: row-reverse;
   }
 
+  .row .column .subtitle {
+    text-align: left;
+    margin-inline: 0;
+    max-width: 55ch;
+  }
+
   .column {
-    flex: 50%;
+    flex: 1 1 50%;
   }
 
   .wiki-content {
-    padding-left: 1em;
+    padding-left: var(--space-md);
   }
 
   .cards {
-    flex-direction: row;
     justify-content: space-between;
   }
 
   .card {
-    align-self: flex-start;
+    align-self: stretch;
   }
-}
\ No newline at end of file
+}
diff --git a/src/_includes/layouts/main.njk b/src/_includes/layouts/main.njk
index f7350e094..69c5589b2 100644
--- a/src/_includes/layouts/main.njk
+++ b/src/_includes/layouts/main.njk
@@ -2,13 +2,14 @@
 layout: layouts/base.njk
 templateClass: tmpl-home
 ---
+{% include "partials/nav.njk" %}
 {% include "partials/header.njk" %}
 
 {% if background %}
-  {% image "Background", background, "", "background", false %}
+  {% image "Background", background, "", "background", false, "100vw", false %}
 {% endif %}
 
-<main class="container {{ templateClass }}">
+<main class="{% if templateClass == 'tmpl-wiki' %}wiki-main{% else %}container{% endif %} {{ templateClass }}">
   {{ content | safe }}
 </main>
 
diff --git a/src/_includes/layouts/wiki.njk b/src/_includes/layouts/wiki.njk
index f61ee21a0..b4c324977 100644
--- a/src/_includes/layouts/wiki.njk
+++ b/src/_includes/layouts/wiki.njk
@@ -2,7 +2,13 @@
 layout: layouts/main.njk
 templateClass: tmpl-wiki
 ---
-<div class="row row-reverse">
+<div class="wiki-layout">
+  <div class="wiki-toc">
+    {%- if eleventyNavigation -%}
+      {%- set navKey = eleventyNavigation.key -%}
+    {%- endif -%}
+    {{ collections.wiki | eleventyNavigation | eleventyNavigationToHtml({ activeKey: navKey, listClass: 'wiki-toc-list', activeListItemClass: 'wiki-toc-active' }) | safe }}
+  </div>
   <div class="wiki-content content">
   <!---  {% if eleventyNavigation and eleventyNavigation.parent %}
     <nav class="breadcrumb" aria-labelledby="breadcrumb">
@@ -24,10 +30,4 @@ templateClass: tmpl-wiki
 
     {% endif %}
   </div>
-  <div class="wiki-toc">
-    {%- if eleventyNavigation -%}
-      {%- set navKey = eleventyNavigation.key -%}
-    {%- endif -%}
-    {{ collections.wiki | eleventyNavigation | eleventyNavigationToHtml({ activeKey: navKey, listClass: 'wiki-toc-list', activeListItemClass: 'wiki-toc-active' }) | safe }}
-  </div>
 </div>
\ No newline at end of file
diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk
index 76d450192..940e11a04 100644
--- a/src/_includes/partials/footer.njk
+++ b/src/_includes/partials/footer.njk
@@ -1,7 +1,6 @@
 <div class="footer">
-    <div class="container">
-        {% include "edit-on-github.njk" %}
-        © 2021-2026 PolyMC Contributors
-        </h1>
-    </div>
-</div>
\ No newline at end of file
+  <div class="container">
+    {% include "edit-on-github.njk" %}
+    <p>© 2021-2026 PolyMC Contributors</p>
+  </div>
+</div>
diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk
index 0421382d4..b5183d2f9 100644
--- a/src/_includes/partials/header.njk
+++ b/src/_includes/partials/header.njk
@@ -1,103 +1,24 @@
+{% if hero %}
 <header>
   <section class="hero">
-    <div class="hero-head">
-      <nav class="container">
-        <div class="navbar">
-          <a href="{{ '/' | url }}">
-            <svg viewBox="0 0 376.77 135.47" xmlns="http://www.w3.org/2000/svg" class="home" role="img" aria-label="PolyMC">
-              <defs>
-                <linearGradient id="a" x1="4.498" x2="12.435" y1="3.801" y2="9.568" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#88b858" offset="0"/>
-                  <stop stop-color="#72b147" offset=".5"/>
-                  <stop stop-color="#5a9a30" offset="1"/>
-                </linearGradient>
-              </defs>
-              <path d="M42.375 118.668s0-24.797 34.094-24.797c34.103 0 34.094 24.797 34.094 24.797z" fill="#765338"/>
-              <path d="M76.47 93.872 42.376 118.67 21.304 53.751z" fill="#b7835a"/>
-              <path d="m76.47 93.872 55.165-40.121-21.072 64.918z" fill="#5b422d"/>
-              <path d="m79 95.709-2.53 1.84-2.532-1.84c0-1.84 2.531-1.84 2.531-1.84s2.531 0 2.531 1.84z" fill="#72b147"/>
-              <path
-                d="M76.47 93.872s0-40.121 55.165-40.121l-1.564 4.819-6.384 8.324-6.384.962-6.383 8.324-6.384.961-6.384
-                  8.325-6.384.961-6.384 8.324-6.383.962z"
-                fill="#5a9a30"/>
-              <path
-                d="m73.938
-                  95.709-6.383-.961-6.384-8.325-6.384-.961-6.384-8.324-6.384-.962-6.383-8.324-6.384-.962-6.384-8.324-1.564-4.819c55.165 0
-                  55.165 40.121 55.165 40.121z"
-                fill="#88b858"/>
-              <path
-                d="m.53 6.685 7.937 5.766 7.937-5.766L8.467.918z"
-                fill="url(#a)"
-                transform="matrix(6.95 0 0 6.9572 17.626 7.241)"/>
-              <path d="m22.868 58.567-1.564-4.82L76.469 93.87l55.166-40.122-1.564 4.82L76.47 97.55z" fill="none"/>
-              <g fill="currentColor" stroke-width=".265">
-                <g stroke-width=".01">
-                  <path d="M168.153 47.323q5.434 0 9.287 1.858 3.852 1.788 5.916 5.228 2.133 3.44 2.133 8.324 0 2.958-.895 5.847-.894 2.82-2.889
-                  5.16-1.926 2.27-5.09 3.646t-7.705 1.375h-7.361v18.3h-6.673V47.322zm.688 25.041q2.958 0 4.884-.963 1.927-.963 3.027-2.408
-                  1.1-1.513 1.582-3.164.482-1.651.482-2.958
-                  0-1.514-.482-3.096-.481-1.651-1.65-2.958-1.101-1.376-2.959-2.202-1.788-.894-4.471-.894h-7.705v18.643zM187.49 82.6q0-4.265
-                  1.994-7.705 2.064-3.44 5.641-5.434 3.577-1.995 8.118-1.995 4.678 0 8.186 1.995 3.509 1.995 5.435 5.434 1.926 3.44 1.926
-                  7.705t-1.926 7.773q-1.926 3.44-5.503 5.435-3.509 1.995-8.187 1.995-4.54
-                  0-8.118-1.857-3.508-1.927-5.572-5.298-1.995-3.44-1.995-8.048zm6.397.07q0 2.751 1.238 5.021 1.238 2.202 3.302 3.509 2.133
-                  1.307 4.678 1.307 2.683 0 4.747-1.307 2.133-1.307 3.302-3.509 1.17-2.27 1.17-5.022
-                  0-2.752-1.17-4.953-1.17-2.27-3.302-3.577-2.064-1.376-4.747-1.376-2.614 0-4.747 1.376-2.063 1.376-3.302 3.646-1.17
-                  2.201-1.17 4.884zM223.251 43.858h6.398v53.246h-6.398zM238.914 110.808l18.78-42.17h5.917l-18.368
-                  42.17zm7.017-13.484-13.69-28.687h7.223l11.489 25.453zM266.775 97.085V51.2h.063l23.855 33.774-3.043-.67L311.384
-                  51.2h.122v45.885h-7.06v-29.88l.487 3.59-16.065 22.7h-.122l-16.31-22.7 1.218-3.286v29.576zM352.299 93.62q-.974.67-2.921
-                  1.643-1.887.973-4.564
-                  1.704-2.617.67-5.843.608-5.172-.062-9.31-1.825-4.138-1.826-6.999-4.869-2.86-3.104-4.442-7.06-1.522-4.016-1.522-8.52
-                  0-5.05 1.583-9.25t4.503-7.241q2.921-3.104 6.938-4.808 4.016-1.704 8.763-1.704 4.199 0 7.485 1.156 3.347 1.096 5.598
-                  2.496l-2.799 6.633q-1.704-1.156-4.26-2.313-2.556-1.156-5.781-1.156-2.921 0-5.599 1.217-2.678 1.156-4.686 3.347-2.008
-                  2.13-3.225 4.99-1.156 2.86-1.156 6.208 0 3.468 1.034 6.39 1.096 2.92 3.043 5.05 2.008 2.07 4.747 3.287 2.799 1.156 6.268
-                  1.156 3.408 0 5.964-1.035 2.616-1.095 4.199-2.434z"/>
-                </g>
-              </g>
-            </svg>
-          </a>
-          <ul class="nav">
-            {%- for entry in collections.nav | eleventyNavigation %}
-              <li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}">
-                <a href="{{ entry.url | url }}">{{ entry.title }}</a>
-              </li>
-            {%- endfor %}
-          </ul>
-        </div>
-        <div class="links">
-          <div class="social-links">
-            <a href="https://discord.gg/WMtwnF5Cbr" target="_blank"><i class="fa fa-discord"></i></a>
-            <a href="https://matrix.to/#/#polymc:matrix.org" target="_blank"><i class="fa fa-matrix-org"></i></a>
-            <a href="https://www.reddit.com/r/PolyMCLauncher/" target="_blank"><i class="fa fa-reddit"></i></a>
-            <a href="https://github.com/PolyMC/PolyMC" target="_blank"><i class="fa fa-github"></i></a>
-          </div>
-          <div>
-            <a class="button" href="{{ '/download/' | url }}">Download</a>
-            <a class="button" href="https://opencollective.com/polymc">Donate</a>
-          </div>
-        </div>
-      </nav>
-    </div>
-    
-    {% if hero %}
     <div class="hero-body">
-      <div class="row container">
+      <div class="container row">
         <div class="column">
           <div class="hero-description">
             <h1 class="hero-title">{{ hero.title }}</h1>
             <p class="subtitle">{{ hero.description }}</p>
             {%- if hero.download == true %}
-              <br>
-                <a class="button is-big" href="{{ '/download' | url }}">Download Now</a>
-              {%- endif %}
+              <a class="button button-hex is-big" href="{{ '/download' | url }}">Download Now</a>
+            {%- endif %}
           </div>
-          </div class="image">
-          {%- if hero.image %}
-            <div class="column">
-              {% image hero.title, hero.image.light, hero.image.dark %}
-            </div>
-          {%- endif %}
         </div>
+        {%- if hero.image %}
+        <div class="column">
+          {% image hero.title, hero.image.light, hero.image.dark %}
+        </div>
+        {%- endif %}
       </div>
     </div>
-    {% endif %}
   </section>
-</header>
\ No newline at end of file
+</header>
+{% endif %}
diff --git a/src/_includes/partials/nav.njk b/src/_includes/partials/nav.njk
new file mode 100644
index 000000000..03d064c5f
--- /dev/null
+++ b/src/_includes/partials/nav.njk
@@ -0,0 +1,74 @@
+<nav class="hero-head" aria-label="Main">
+  <div class="navbar">
+    <a class="home-link" href="{{ '/' | url }}" aria-label="PolyMC home">
+      <svg viewBox="0 0 376.77 135.47" xmlns="http://www.w3.org/2000/svg" class="home" role="img" aria-label="PolyMC">
+        <defs>
+          <linearGradient id="a" x1="4.498" x2="12.435" y1="3.801" y2="9.568" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#88b858" offset="0"/>
+            <stop stop-color="#72b147" offset=".5"/>
+            <stop stop-color="#5a9a30" offset="1"/>
+          </linearGradient>
+        </defs>
+        <path d="M42.375 118.668s0-24.797 34.094-24.797c34.103 0 34.094 24.797 34.094 24.797z" fill="#765338"/>
+        <path d="M76.47 93.872 42.376 118.67 21.304 53.751z" fill="#b7835a"/>
+        <path d="m76.47 93.872 55.165-40.121-21.072 64.918z" fill="#5b422d"/>
+        <path d="m79 95.709-2.53 1.84-2.532-1.84c0-1.84 2.531-1.84 2.531-1.84s2.531 0 2.531 1.84z" fill="#72b147"/>
+        <path
+          d="M76.47 93.872s0-40.121 55.165-40.121l-1.564 4.819-6.384 8.324-6.384.962-6.383 8.324-6.384.961-6.384
+            8.325-6.384.961-6.384 8.324-6.383.962z"
+          fill="#5a9a30"/>
+        <path
+          d="m73.938
+            95.709-6.383-.961-6.384-8.325-6.384-.961-6.384-8.324-6.384-.962-6.383-8.324-6.384-.962-6.384-8.324-1.564-4.819c55.165 0
+            55.165 40.121 55.165 40.121z"
+          fill="#88b858"/>
+        <path
+          d="m.53 6.685 7.937 5.766 7.937-5.766L8.467.918z"
+          fill="url(#a)"
+          transform="matrix(6.95 0 0 6.9572 17.626 7.241)"/>
+        <path d="m22.868 58.567-1.564-4.82L76.469 93.87l55.166-40.122-1.564 4.82L76.47 97.55z" fill="none"/>
+        <g fill="currentColor" stroke-width=".265">
+          <g stroke-width=".01">
+            <path d="M168.153 47.323q5.434 0 9.287 1.858 3.852 1.788 5.916 5.228 2.133 3.44 2.133 8.324 0 2.958-.895 5.847-.894 2.82-2.889
+              5.16-1.926 2.27-5.09 3.646t-7.705 1.375h-7.361v18.3h-6.673V47.322zm.688 25.041q2.958 0 4.884-.963 1.927-.963 3.027-2.408
+              1.1-1.513 1.582-3.164.482-1.651.482-2.958
+              0-1.514-.482-3.096-.481-1.651-1.65-2.958-1.101-1.376-2.959-2.202-1.788-.894-4.471-.894h-7.705v18.643zM187.49 82.6q0-4.265
+              1.994-7.705 2.064-3.44 5.641-5.434 3.577-1.995 8.118-1.995 4.678 0 8.186 1.995 3.509 1.995 5.435 5.434 1.926 3.44 1.926
+              7.705t-1.926 7.773q-1.926 3.44-5.503 5.435-3.509 1.995-8.187 1.995-4.54
+              0-8.118-1.857-3.508-1.927-5.572-5.298-1.995-3.44-1.995-8.048zm6.397.07q0 2.751 1.238 5.021 1.238 2.202 3.302 3.509 2.133
+              1.307 4.678 1.307 2.683 0 4.747-1.307 2.133-1.307 3.302-3.509 1.17-2.27 1.17-5.022
+              0-2.752-1.17-4.953-1.17-2.27-3.302-3.577-2.064-1.376-4.747-1.376-2.614 0-4.747 1.376-2.063 1.376-3.302 3.646-1.17
+              2.201-1.17 4.884zM223.251 43.858h6.398v53.246h-6.398zM238.914 110.808l18.78-42.17h5.917l-18.368
+              42.17zm7.017-13.484-13.69-28.687h7.223l11.489 25.453zM266.775 97.085V51.2h.063l23.855 33.774-3.043-.67L311.384
+              51.2h.122v45.885h-7.06v-29.88l.487 3.59-16.065 22.7h-.122l-16.31-22.7 1.218-3.286v29.576zM352.299 93.62q-.974.67-2.921
+              1.643-1.887.973-4.564
+              1.704-2.617.67-5.843.608-5.172-.062-9.31-1.825-4.138-1.826-6.999-4.869-2.86-3.104-4.442-7.06-1.522-4.016-1.522-8.52
+              0-5.05 1.583-9.25t4.503-7.241q2.921-3.104 6.938-4.808 4.016-1.704 8.763-1.704 4.199 0 7.485 1.156 3.347 1.096 5.598
+              2.496l-2.799 6.633q-1.704-1.156-4.26-2.313-2.556-1.156-5.781-1.156-2.921 0-5.599 1.217-2.678 1.156-4.686 3.347-2.008
+              2.13-3.225 4.99-1.156 2.86-1.156 6.208 0 3.468 1.034 6.39 1.096 2.92 3.043 5.05 2.008 2.07 4.747 3.287 2.799 1.156 6.268
+              1.156 3.408 0 5.964-1.035 2.616-1.095 4.199-2.434z"/>
+          </g>
+        </g>
+      </svg>
+    </a>
+    <ul class="nav">
+      {%- for entry in collections.nav | eleventyNavigation %}
+        <li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}">
+          <a href="{{ entry.url | url }}">{{ entry.title }}</a>
+        </li>
+      {%- endfor %}
+    </ul>
+  </div>
+  <div class="links">
+    <div class="social-links">
+      <a href="https://discord.gg/WMtwnF5Cbr" target="_blank" rel="noopener noreferrer" aria-label="Discord"><i class="fa fa-discord" aria-hidden="true"></i></a>
+      <a href="https://matrix.to/#/#polymc:matrix.org" target="_blank" rel="noopener noreferrer" aria-label="Matrix"><i class="fa fa-matrix-org" aria-hidden="true"></i></a>
+      <a href="https://www.reddit.com/r/PolyMCLauncher/" target="_blank" rel="noopener noreferrer" aria-label="Reddit"><i class="fa fa-reddit" aria-hidden="true"></i></a>
+      <a href="https://github.com/PolyMC/PolyMC" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><i class="fa fa-github" aria-hidden="true"></i></a>
+    </div>
+    <div>
+      <a class="button" href="{{ '/download/' | url }}">Download</a>
+      <a class="button" href="https://opencollective.com/polymc">Donate</a>
+    </div>
+  </div>
+</nav>
diff --git a/src/about.md b/src/about.md
index 1d25f1b3c..4cd27390f 100644
--- a/src/about.md
+++ b/src/about.md
@@ -59,4 +59,17 @@ PolyMC is a custom launcher for Minecraft that was forked from MultiMC. It allow
   </li>
   {% endfor %}
 </ul>
+
+<style>
+.user-contrib a[href="https://github.com/staFF6773"] img {
+  border: 0.2em solid var(--primary);
+  border-radius: var(--radius-md);
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
+}
+.user-contrib a[href="https://github.com/staFF6773"]:hover img,
+.user-contrib a[href="https://github.com/staFF6773"]:focus img {
+  transform: scale(1.15);
+  box-shadow: 0 0 0.75em var(--primary);
+}
+</style>
 </div>