diff --git a/app/components/site/Navbar.tsx b/app/components/site/Navbar.tsx
index 51af37c..3da7c71 100644
--- a/app/components/site/Navbar.tsx
+++ b/app/components/site/Navbar.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { AnimatePresence, motion } from "framer-motion";
 import { Menu, X } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState, type MouseEvent, type PointerEvent } from "react";
 import { cn } from "../util/cn";
 import { FlarialLogo } from "./FlarialLogo";
 
@@ -15,15 +15,44 @@ const NAV = [
   { href: "/faq", label: "FAQ" },
 ];
 
+const docsStorageKey = "flarial:last-docs-article";
+const docsSlugs = new Set([
+  "what-is-flarial",
+  "usage",
+  "compatibility",
+  "configs",
+  "modules-list",
+  "flarial-nametag-icon",
+  "module-blocking",
+  "scripting-api",
+]);
+
+function getRememberedDocsHref() {
+  if (typeof window === "undefined") {
+    return "/docs";
+  }
+
+  const slug = window.localStorage.getItem(docsStorageKey);
+  return slug && docsSlugs.has(slug) ? `/docs/${slug}/` : "/docs";
+}
+
 export function Navbar({ onOpenPalette: _ = () => {} }: { onOpenPalette?: () => void } = {}) {
   const pathname = usePathname();
   const isHome = pathname === "/";
+  const navRef = useRef<HTMLElement | null>(null);
+  const navItemRefs = useRef<(HTMLAnchorElement | null)[]>([]);
+  const lastTouchToggleAtRef = useRef(0);
 
   /* Two thresholds: a small one for the bg-blur tint, a bigger one (home only)
      for the slide-in reveal once the visitor leaves the hero. */
   const [scrolled, setScrolled] = useState(false);
   const [revealed, setRevealed] = useState(!isHome);
   const [mobile, setMobile] = useState(false);
+  const [docsHref, setDocsHref] = useState("/docs");
+  const [indicator, setIndicator] = useState({ x: 0, width: 0, opacity: 0 });
+  const activeIndex = NAV.findIndex(
+    (item) => pathname === item.href || (item.href !== "/" && pathname?.startsWith(item.href)),
+  );
 
   useEffect(() => {
     const onScroll = () => {
@@ -43,15 +72,64 @@ export function Navbar({ onOpenPalette: _ = () => {} }: { onOpenPalette?: () =>
 
   useEffect(() => {
     setMobile(false);
+    setDocsHref(getRememberedDocsHref());
   }, [pathname]);
 
+  useEffect(() => {
+    setDocsHref(getRememberedDocsHref());
+  }, []);
+
+  useLayoutEffect(() => {
+    const updateIndicator = () => {
+      const activeItem = activeIndex >= 0 ? navItemRefs.current[activeIndex] : null;
+      if (!activeItem) {
+        setIndicator((current) => ({ ...current, opacity: 0 }));
+        return;
+      }
+
+      setIndicator({
+        x: activeItem.offsetLeft,
+        width: activeItem.offsetWidth,
+        opacity: 1,
+      });
+    };
+
+    updateIndicator();
+    window.addEventListener("resize", updateIndicator);
+    return () => window.removeEventListener("resize", updateIndicator);
+  }, [activeIndex]);
+
+  const toggleMobileMenu = () => {
+    setMobile((v) => !v);
+  };
+
+  const handleMobilePointerDown = (event: PointerEvent<HTMLButtonElement>) => {
+    if (event.pointerType !== "touch" && event.pointerType !== "pen") {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    lastTouchToggleAtRef.current = Date.now();
+    toggleMobileMenu();
+  };
+
+  const handleMobileClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    if (Date.now() - lastTouchToggleAtRef.current < 700) {
+      return;
+    }
+
+    toggleMobileMenu();
+  };
+
   return (
     <motion.header
       initial={false}
       animate={{ y: revealed ? 0 : "-110%" }}
       transition={{ type: "spring", stiffness: 200, damping: 30, mass: 0.9 }}
       className={cn(
-        "fixed top-0 inset-x-0 z-30 backdrop-blur-md",
+        "fixed top-0 inset-x-0 z-50 backdrop-blur-md",
         scrolled ? "bg-[var(--color-bg-base)]/82" : "bg-[var(--color-bg-base)]/60",
       )}
       style={{
@@ -66,26 +144,30 @@ export function Navbar({ onOpenPalette: _ = () => {} }: { onOpenPalette?: () =>
             Flarial
           </span>
         </Link>
-        <nav className="hidden md:flex items-center gap-1">
-          {NAV.map((item) => {
+        <nav ref={navRef} className="relative hidden md:flex items-center gap-1">
+          <motion.span
+            aria-hidden
+            className="pointer-events-none absolute inset-y-0 left-0 rounded-[var(--radius-md)]"
+            animate={indicator}
+            initial={false}
+            transition={{ type: "spring", stiffness: 420, damping: 34, mass: 0.8 }}
+            style={{ background: "var(--color-bg-nav)" }}
+          />
+          {NAV.map((item, index) => {
             const active = pathname === item.href || (item.href !== "/" && pathname?.startsWith(item.href));
+            const href = item.href === "/docs" ? docsHref : item.href;
             return (
               <Link
                 key={item.href}
-                href={item.href}
+                ref={(node) => {
+                  navItemRefs.current[index] = node;
+                }}
+                href={href}
                 className={cn(
                   "relative px-4 py-2 rounded-[var(--radius-md)] font-display font-semibold text-[15px] tracking-[-0.01em] transition-colors",
                   active ? "text-white" : "text-[var(--color-text-mute)] hover:text-white",
                 )}
               >
-                {active ? (
-                  <motion.span
-                    layoutId="nav-active"
-                    className="absolute inset-0 rounded-[var(--radius-md)]"
-                    style={{ background: "var(--color-bg-nav)" }}
-                    transition={{ type: "spring", stiffness: 380, damping: 30 }}
-                  />
-                ) : null}
                 <span className="relative z-10">{item.label}</span>
               </Link>
             );
@@ -108,9 +190,10 @@ export function Navbar({ onOpenPalette: _ = () => {} }: { onOpenPalette?: () =>
           </Link>
           <button
             type="button"
-            onClick={() => setMobile((v) => !v)}
-            className="md:hidden grid place-items-center w-9 h-9 rounded-[var(--radius-md)] text-white"
-            style={{ background: "var(--color-bg-nav)" }}
+            onPointerDown={handleMobilePointerDown}
+            onClick={handleMobileClick}
+            className="relative z-10 md:hidden grid h-11 w-11 touch-manipulation select-none cursor-pointer place-items-center rounded-[var(--radius-md)] text-white"
+            style={{ background: "var(--color-bg-nav)", WebkitTapHighlightColor: "transparent" }}
             aria-label={mobile ? "Close menu" : "Open menu"}
             aria-expanded={mobile}
           >
@@ -133,7 +216,7 @@ export function Navbar({ onOpenPalette: _ = () => {} }: { onOpenPalette?: () =>
               {NAV.map((item) => (
                 <Link
                   key={item.href}
-                  href={item.href}
+                  href={item.href === "/docs" ? docsHref : item.href}
                   className="px-3 py-2.5 rounded-[var(--radius-md)] font-mono text-[12px] uppercase tracking-widest text-white hover:bg-black/30"
                 >
                   {item.label}
diff --git a/app/components/site/SiteFrame.tsx b/app/components/site/SiteFrame.tsx
index 2fec3f8..b05f8a6 100644
--- a/app/components/site/SiteFrame.tsx
+++ b/app/components/site/SiteFrame.tsx
@@ -15,6 +15,9 @@ export function SiteFrame({ children }: { children: ReactNode }) {
     let lenis: { destroy?: () => void; raf?: (t: number) => void } | null = null;
     let raf = 0;
     let cancelled = false;
+    if (pathname.startsWith("/docs")) {
+      return;
+    }
     if (
       typeof window !== "undefined" &&
       !window.matchMedia("(prefers-reduced-motion: reduce)").matches
@@ -39,7 +42,7 @@ export function SiteFrame({ children }: { children: ReactNode }) {
       cancelAnimationFrame(raf);
       (lenis as unknown as { destroy?: () => void } | null)?.destroy?.();
     };
-  }, []);
+  }, [pathname]);
 
   return (
     <>
diff --git a/app/docs/CopyablePath.tsx b/app/docs/CopyablePath.tsx
new file mode 100644
index 0000000..3e31b06
--- /dev/null
+++ b/app/docs/CopyablePath.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+
+export function CopyablePath({ value }: { value: string }) {
+  const [copied, setCopied] = useState(false);
+
+  async function copyPath() {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    } catch {
+      const input = document.createElement("input");
+      input.value = value;
+      document.body.append(input);
+      input.select();
+      document.execCommand("copy");
+      input.remove();
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    }
+  }
+
+  const Icon = copied ? Check : Copy;
+
+  return (
+    <button
+      type="button"
+      onClick={copyPath}
+      className="group flex w-full min-w-0 cursor-pointer items-center justify-between gap-3 rounded-[var(--radius-md)] bg-black/25 px-3 py-2 text-left transition-colors hover:bg-[var(--color-bg-subtle)]"
+      aria-label={`Copy ${value}`}
+    >
+      <code className="min-w-0 break-all font-mono text-[12px] text-[var(--color-accent-hi)]">{value}</code>
+      <span className="grid h-7 w-7 shrink-0 place-items-center rounded-[var(--radius-sm)] text-[var(--color-text-mute)] opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100">
+        <Icon size={14} />
+      </span>
+    </button>
+  );
+}
diff --git a/app/docs/DocsHeading.tsx b/app/docs/DocsHeading.tsx
new file mode 100644
index 0000000..bb9d561
--- /dev/null
+++ b/app/docs/DocsHeading.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import type { MouseEvent, ReactNode } from "react";
+
+export function DocsHeading({ id, children }: { id: string; children: ReactNode }) {
+  async function copySectionLink(event?: MouseEvent<HTMLElement>) {
+    event?.stopPropagation();
+    const url = `${window.location.origin}${window.location.pathname}#${id}`;
+
+    try {
+      await navigator.clipboard.writeText(url);
+    } catch {
+      const input = document.createElement("input");
+      input.value = url;
+      document.body.append(input);
+      input.select();
+      document.execCommand("copy");
+      input.remove();
+    }
+
+    window.history.replaceState(null, "", `#${id}`);
+  }
+
+  return (
+    <h2
+      id={id}
+      data-docs-heading="true"
+      data-docs-heading-title={typeof children === "string" ? children : undefined}
+      onClick={copySectionLink}
+      className="group flex w-fit max-w-full min-w-0 scroll-mt-36 cursor-pointer items-center gap-2 border-b-[3px] border-[var(--color-accent)] pb-0 pr-0 font-display text-[24px] font-semibold tracking-[-0.02em] text-white sm:text-[28px]"
+    >
+      <span className="min-w-0">{children}</span>
+      <button
+        type="button"
+        onClick={copySectionLink}
+        aria-label={`Copy link to ${children}`}
+        className="shrink-0 cursor-pointer rounded-[var(--radius-xs)] px-1 font-mono text-[18px] text-[var(--color-accent)] opacity-0 transition-opacity hover:bg-[var(--color-bg-subtle)] group-hover:opacity-100 focus:opacity-100"
+      >
+        #
+      </button>
+    </h2>
+  );
+}
diff --git a/app/docs/DocsMemory.tsx b/app/docs/DocsMemory.tsx
new file mode 100644
index 0000000..90b7a6b
--- /dev/null
+++ b/app/docs/DocsMemory.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+const storageKey = "flarial:last-docs-article";
+const validSlugs = new Set([
+  "what-is-flarial",
+  "usage",
+  "compatibility",
+  "module-blocking",
+  "modules-list",
+  "extra-features",
+]);
+
+export function RememberDocsArticle({ slug }: { slug: string }) {
+  useEffect(() => {
+    window.localStorage.setItem(storageKey, slug);
+  }, [slug]);
+
+  return null;
+}
+
+export function OpenLastDocsArticle() {
+  const router = useRouter();
+
+  useEffect(() => {
+    const lastSlug = window.localStorage.getItem(storageKey);
+
+    if (lastSlug && validSlugs.has(lastSlug)) {
+      router.replace(`/docs/${lastSlug}/`);
+    }
+  }, [router]);
+
+  return null;
+}
diff --git a/app/docs/DocsToc.tsx b/app/docs/DocsToc.tsx
new file mode 100644
index 0000000..a16ca11
--- /dev/null
+++ b/app/docs/DocsToc.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ListChecks } from "lucide-react";
+
+type HeadingItem = {
+  href: string;
+  title: string;
+};
+
+function readHeadings() {
+  const article = document.getElementById("docs-article-content");
+  if (!article) return [];
+
+  return Array.from(article.querySelectorAll<HTMLElement>("[data-docs-heading][id]"))
+    .map((heading) => ({
+      href: `#${heading.id}`,
+      title: heading.dataset.docsHeadingTitle ?? heading.textContent?.replace(/#$/, "").trim() ?? "",
+    }))
+    .filter((item) => item.title.length > 0);
+}
+
+export function DocsToc() {
+  const [items, setItems] = useState<HeadingItem[]>([]);
+
+  useEffect(() => {
+    const syncHeadings = () => setItems(readHeadings());
+    syncHeadings();
+
+    const article = document.getElementById("docs-article-content");
+    if (!article) return;
+
+    const observer = new MutationObserver(syncHeadings);
+    observer.observe(article, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["id", "data-docs-heading", "data-docs-heading-title"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div className="rounded-[var(--radius-2xl)] p-4" style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+      <div className="flex items-center gap-2 font-display font-semibold text-white">
+        <ListChecks size={16} className="text-[var(--color-accent)]" />
+        On this page
+      </div>
+      <nav className="mt-4 grid gap-2 text-[13px] text-[var(--color-text-mute)]">
+        {items.map((item) => (
+          <a key={item.href} href={item.href} className="rounded-[var(--radius-sm)] px-2 py-1.5 hover:bg-[var(--color-bg-subtle)] hover:text-white">
+            {item.title}
+          </a>
+        ))}
+      </nav>
+    </div>
+  );
+}
diff --git a/app/docs/SupportedVersions.tsx b/app/docs/SupportedVersions.tsx
new file mode 100644
index 0000000..2ab5158
--- /dev/null
+++ b/app/docs/SupportedVersions.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const supportedVersionsUrl =
+  "https://raw.githubusercontent.com/flarialmc/newcdn/refs/heads/main/launcher/Supported.json";
+
+export function SupportedVersions() {
+  const [versions, setVersions] = useState<string[]>([]);
+  const [status, setStatus] = useState<"loading" | "ready" | "error">("loading");
+
+  useEffect(() => {
+    let cancelled = false;
+
+    fetch(supportedVersionsUrl, { cache: "no-store" })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Failed to load supported versions");
+        }
+        return response.json() as Promise<Record<string, boolean>>;
+      })
+      .then((data) => {
+        if (cancelled) return;
+        setVersions(
+          Object.entries(data)
+            .filter(([, supported]) => supported)
+            .map(([version]) => version),
+        );
+        setStatus("ready");
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setStatus("error");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (status === "loading") {
+    return <p className="text-[var(--color-text-mute)]">Loading supported versions...</p>;
+  }
+
+  if (status === "error") {
+    return (
+      <p className="text-[var(--color-text-mute)]">
+        Supported versions could not be loaded right now. Check the launcher data source again in a moment.
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {versions.map((version) => (
+        <span key={version} className="rounded-full bg-black/25 px-3 py-1.5 font-mono text-[12px] text-white">
+          {version}
+        </span>
+      ))}
+    </div>
+  );
+}
diff --git a/app/docs/[slug]/page.tsx b/app/docs/[slug]/page.tsx
new file mode 100644
index 0000000..f581cd6
--- /dev/null
+++ b/app/docs/[slug]/page.tsx
@@ -0,0 +1,48 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { DocsArticlePage, docsArticles, getDocsArticle } from "../docs-data";
+
+export function generateStaticParams() {
+  return docsArticles.map((article) => ({ slug: article.slug }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const article = getDocsArticle(slug);
+
+  if (!article) {
+    return {
+      title: "Docs",
+    };
+  }
+
+  return {
+    title: article.title,
+    description: article.summary,
+    alternates: { canonical: `/docs/${article.slug}` },
+    openGraph: {
+      title: `${article.title} · Flarial Docs`,
+      description: article.summary,
+      type: "article",
+    },
+  };
+}
+
+export default async function DocsArticleRoute({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const article = getDocsArticle(slug);
+
+  if (!article) {
+    notFound();
+  }
+
+  return <DocsArticlePage article={article} />;
+}
diff --git a/app/docs/articles/article-data.ts b/app/docs/articles/article-data.ts
new file mode 100644
index 0000000..5d4810b
--- /dev/null
+++ b/app/docs/articles/article-data.ts
@@ -0,0 +1,316 @@
+import { dllCssModuleDetails, type DllCssModuleCategory } from "../dll-css-module-details";
+
+export { dllCssModuleDetails };
+
+export const restrictThreePayload = `{
+  "server_name": "Example Server",
+  "notification_message": "This feature is disabled on this server.",
+  "flarial_client_modules": {
+    "module.freelook.name": {
+      "block": true,
+      "restriction_reason": "Freelook is disabled on this server."
+    },
+    "module.full_bright.name": {
+      "block": true,
+      "restriction_reason": "Fullbright is disabled on this server."
+    },
+    "module.crystal_optimizer.name": {
+      "block": true,
+      "restriction_reason": "Crystal Optimizer is disabled on this server."
+    }
+  }
+}`;
+
+export const restrictOnePayload = `{
+  "server_name": "Example Server",
+  "notification_message": "Disabled by this server.",
+  "flarial_client_modules": {
+    "module.zoom.name": { "block": true }
+  }
+}`;
+
+export const clearPayload = `{
+  "server_name": "Example Server",
+  "flarial_client_modules": {}
+}`;
+
+export const scriptingExample = `name = "Auto GG Lite"
+description = "Sends a quick GG when a win message appears."
+
+enabled = settings.addToggle("Enabled", "Allow the script to send GG.", true)
+
+onEvent("ChatReceiveEvent", function(message, playerName, type)
+    if not enabled.value then return end
+
+    if message == "won the game" then
+        player.say("gg")
+    end
+end)`;
+
+export const configExample = `{
+  "ClickGUI": {
+    "enabled": false,
+    "keybind": "K",
+    "favorite": false
+  },
+  "Coordinates": {
+    "enabled": true,
+    "percentageX": 0.012,
+    "percentageY": 0.84,
+    "textCol": "fafafa",
+    "textOpacity": 1.0,
+    "showBg": true
+  },
+  "Zoom": {
+    "enabled": false,
+    "keybind": "C",
+    "modifier": 30.0
+  }
+}`;
+
+export const privateConfigExample = `{
+  "currentConfig": "default.json",
+  "fontname": "Space Grotesk",
+  "blurintensity": 2.0,
+  "vsync": false,
+  "killdx": false,
+  "dotcmdprefix": ".",
+  "enabledModulesOnTop": true,
+  "watermark": true
+}`;
+
+export const nametagIcons = [
+  {
+    name: "Blue",
+    role: "Developer",
+    color: "Developer team",
+    accent: "#32d7ff",
+    image: "/flarial-icons/cyan-logo.png",
+    details: "Given to members of the Flarial developer team. They can be recognized with the Team role on Discord.",
+    href: undefined,
+  },
+  {
+    name: "White",
+    role: "Staff",
+    color: "Moderation",
+    accent: "#ffffff",
+    image: "/flarial-icons/white-logo.png",
+    details: "Given to moderators and other Flarial staff. They can be recognized by the Moderator role on Discord.",
+    href: undefined,
+  },
+  {
+    name: "Purple",
+    role: "Gamer",
+    color: "Community",
+    accent: "#b55cff",
+    image: "/flarial-icons/gamer-logo.png",
+    details: "Given to close friends and family of the core Flarial team, plus people considered relevant in the MCBE, mostly modding, community. Repeatedly asking for Gamer may result in being permanently blacklisted from it.",
+    href: undefined,
+  },
+  {
+    name: "Dark Pink",
+    role: "Supporter",
+    color: "Flarial+",
+    accent: "#ff3d91",
+    image: "/flarial-icons/supporter-logo.png",
+    details: "Given to people who donate to Flarial. Link Discord to Ko-fi, then run /claimrole in cmds. The command is case sensitive, so capital letters, spaces, and spelling matter.",
+    href: "https://ko-fi.com/flarialmc",
+  },
+  {
+    name: "Green",
+    role: "Media",
+    color: "Creator",
+    accent: "#59e77b",
+    image: "/flarial-icons/media-logo.png",
+    details: "Given to people whose social media channels contain content promoting Flarial. Create a ticket in the Discord server to apply for the Media role.",
+    href: undefined,
+  },
+  {
+    name: "Light Pink",
+    role: "Booster",
+    color: "Discord boost",
+    accent: "#ff9cc9",
+    image: "/flarial-icons/booster-logo.png",
+    details: "Given to everyone who boosts the Flarial Discord server. Run /claimrole in cmds after boosting. The logo lasts for the duration of the boost.",
+    href: undefined,
+  },
+  {
+    name: "Red",
+    role: "Default",
+    color: "Everyone",
+    accent: "#ff233a",
+    image: "/flarial-icons/red-logo.png",
+    details: "Given to all Flarial users by default.",
+    href: undefined,
+  },
+] as const;
+
+export const blockableModules = [
+  ["Motion Blur", "module.motion_blur.name"],
+  ["Deepfry", "module.deepfry.name"],
+  ["Saturation", "module.saturation.name"],
+  ["PatarHD", "module.patarhd.name"],
+  ["DVD Screen", "module.dvd_screen.name"],
+  ["FOV Changer", "module.fov_changer.name"],
+  ["Zoom", "module.zoom.name"],
+  ["Upside Down", "module.upside_down.name"],
+  ["ClickGUI", "module.clickgui.name"],
+  ["Meds", "module.meds.name"],
+  ["FPS", "module.fps.name"],
+  ["CPS", "module.cps.name"],
+  ["IP Display", "module.ip_display.name"],
+  ["Reach Counter", "module.reach_counter.name"],
+  ["Combo", "module.combo.name"],
+  ["Ping Counter", "module.ping_counter.name"],
+  ["Pot Counter", "module.pot_counter.name"],
+  ["Arrow Counter", "module.arrow_counter.name"],
+  ["Item Tracker", "module.item_tracker.name"],
+  ["Entity Counter", "module.entity_counter.name"],
+  ["Clock", "module.clock.name"],
+  ["Memory", "module.memory.name"],
+  ["Fullbright", "module.fullbright.name"],
+  ["Keystrokes", "module.keystrokes.name"],
+  ["Toggle Sneak", "module.toggle_sneak.name"],
+  ["Toggle Sprint", "module.toggle_sprint.name"],
+  ["Hitbox", "module.hitbox.name"],
+  ["Hurt Color", "module.hurt_color.name"],
+  ["Block Hit", "module.block_hit.name"],
+  ["Fire Height", "module.fire_height.name"],
+  ["Better Inventory", "module.better_inventory.name"],
+  ["Dynamic Lighting", "module.dynamic_lighting.name"],
+  ["Nametag", "module.nametag.name"],
+  ["Java Dynamic FOV", "module.java_dynamic_fov.name"],
+  ["SnapLook", "module.snaplook.name"],
+  ["Fog Color", "module.fog_color.name"],
+  ["ArmorHUD", "module.armorhud.name"],
+  ["Time Changer", "module.time_changer.name"],
+  ["Movable Paperdoll", "module.movable_paperdoll.name"],
+  ["MC GUI Scale", "module.mc_gui_scale.name"],
+  ["Render Option", "module.render_option.name"],
+  ["Glint Color", "module.glint_color.name"],
+  ["Item Physics", "module.item_physics.name"],
+  ["Tab List", "module.tab_list.name"],
+  ["Weather Changer", "module.weather_changer.name"],
+  ["Nick", "module.nick.name"],
+  ["FreeLook", "module.freelook.name"],
+  ["Auto Perspective", "module.auto_perspective.name"],
+  ["Auto GG", "module.auto_gg.name"],
+  ["Text Hotkey", "module.text_hotkey.name"],
+  ["Speed Display", "module.speed_display.name"],
+  ["CPS Limiter", "module.cps_limiter.name"],
+  ["Break Progress", "module.break_progress.name"],
+  ["Animations", "module.animations.name"],
+  ["Block Outline", "module.block_outline.name"],
+  ["Command Hotkey", "module.command_hotkey.name"],
+  ["No Hurt Cam", "module.no_hurt_cam.name"],
+  ["Inventory HUD", "module.inventory_hud.name"],
+  ["Hive Utils", "module.hive_utils.name"],
+  ["Hit Ping", "module.hit_ping.name"],
+  ["Opponent Reach", "module.opponent_reach.name"],
+  ["View Model", "module.view_model.name"],
+  ["Faster Inventory", "module.faster_inventory.name"],
+  ["PotionHUD", "module.potionhud.name"],
+  ["Movable Scoreboard", "module.movable_scoreboard.name"],
+  ["Movable Title", "module.movable_title.name"],
+  ["Movable Bossbar", "module.movable_bossbar.name"],
+  ["Movable Chat", "module.movable_chat.name"],
+  ["Clear Scoreboard", "module.clear_scoreboard.name"],
+  ["Clear Chat", "module.clear_chat.name"],
+  ["Movable Coordinates", "module.movable_coordinates.name"],
+  ["Movable Hotbar", "module.movable_hotbar.name"],
+  ["Movable Day Counter", "module.movable_day_counter.name"],
+  ["Mouse Strokes", "module.mouse_strokes.name"],
+  ["Java Hotkeys Fix", "module.java_hotkeys_fix.name"],
+  ["Inventory Offhand Hotkey", "module.inventory_offhand_hotkey.name"],
+  ["Hive Statistics", "module.hive_statistics.name"],
+  ["Waypoints", "module.waypoints.name"],
+  ["Null Movement", "module.null_movement.name"],
+  ["Modern Handling", "module.modern_handling.name"],
+  ["Custom Crosshair", "module.custom_crosshair.name"],
+  ["Waila", "module.waila.name"],
+  ["Skin Stealer", "module.skin_stealer.name"],
+  ["Raw Input Buffer", "module.raw_input_buffer.name"],
+  ["Low Health", "module.low_health.name"],
+  ["Player Notifier", "module.player_notifier.name"],
+  ["Zeqa Utils", "module.zeqa_utils.name"],
+  ["Mumble Link", "module.mumble_link.name"],
+  ["Shader Loader", "module.shader_loader.name"],
+  ["Minimal View Bobbing", "module.minimal_view_bobbing.name"],
+  ["Lewis", "module.lewis.name"],
+  ["Coordinates", "module.coordinates.name"],
+  ["Experience Info", "module.experience_info.name"],
+  ["Disable Mouse Wheel", "module.disable_mouse_wheel.name"],
+  ["Java Debug Menu", "module.java_debug_menu.name"],
+  ["DirectionHUD", "module.directionhud.name"],
+  ["Locator Bar", "module.locator_bar.name"],
+  ["Java View Bobbing", "module.java_view_bobbing.name"],
+  ["Death Logger", "module.death_logger.name"],
+  ["Twerk", "module.twerk.name"],
+  ["Cinematic Camera", "module.cinematic_camera.name"],
+  ["Chunk Border", "module.chunk_border.name"],
+  ["Compact Chat", "module.compact_chat.name"],
+  ["Message Logger", "module.message_logger.name"],
+  ["Totem Counter", "module.totem_counter.name"],
+  ["Item Counter", "module.item_counter.name"],
+  ["Delux Overlay", "module.delux_overlay.name"],
+  ["Better Hunger Bar", "module.better_hunger_bar.name"],
+  ["Particle Multiplier", "module.particle_multiplier.name"],
+  ["Bow Sensitivity", "module.bow_sensitivity.name"],
+  ["Subtitles", "module.subtitles.name"],
+  ["Sens Multiplier", "module.sens_multiplier.name"],
+  ["Stopwatch", "module.stopwatch.name"],
+  ["Depth Of Field", "module.depth_of_field.name"],
+  ["Crystal Optimizer", "module.crystal_optimizer.name"],
+  ["TNT Timer", "module.tnt_timer.name"],
+  ["Inventory Lock", "module.inventory_lock.name"],
+  ["Audio Controller", "module.audio_controller.name"],
+  ["Pitch Display", "module.pitch_display.name"],
+  ["Durability Warning", "module.durability_warning.name"],
+  ["Camera Test", "module.camera_test.name"],
+  ["Notebot", "module.notebot.name"],
+  ["Minimap", "module.minimap.name"],
+  ["Doom", "module.doom.name"],
+  ["Discord RPC", "module.discord_rpc.name"],
+] as const;
+
+export const flow = [
+  "PacketHooks hooks inbound ScriptMessagePacket receive callbacks.",
+  "The packet is wrapped in PacketEvent and dispatched through eventMgr.",
+  "ServerModuleControlListener accepts only the flarial_client_event:restrict_features header.",
+  "The JSON payload resolves module names through display names, aliases, and manual aliases.",
+  "Matching modules receive Module::applyServerRestriction and are disabled by ModuleManager::syncState.",
+  "Restrictions are cleared on Disconnect, Transfer, StartGame, or by sending an empty restriction set.",
+];
+
+export const serverImplementationNotes = [
+  "Send the packet with the exact message id: flarial_client_event:restrict_features.",
+  "Keep payloads small; avoid resending the same policy every tick.",
+  "Send valid JSON only. If you generate payloads dynamically, validate them before sending.",
+  "Use documented module keys or aliases instead of copying UI labels from the client.",
+  "Re-send or clear restrictions when players switch servers, worlds, or sessions.",
+  "To clear all restrictions, send an empty module list or object for the same header.",
+];
+
+
+const categoryOrder: DllCssModuleCategory[] = ["Combat", "Movement", "HUD", "Render", "Utility", "Misc"];
+
+export const dllCssModulesByCategory = categoryOrder
+  .map((category) => ({
+    category,
+    modules: dllCssModuleDetails
+      .filter((module) => module.category === category)
+      .sort((a, b) => a.name.localeCompare(b.name)),
+  }))
+  .filter((group) => group.modules.length > 0);
+
+
+export function blockableAliases(token: string, name: string) {
+  const base = token.replace(/^module\./, "").replace(/\.name$/, "");
+  const aliases = [base, token, base.replaceAll("_", ""), name.toLowerCase().replaceAll(" ", "_")];
+
+  if (base === "fullbright") aliases.push("full_bright");
+  if (base === "freelook") aliases.push("free_look");
+  if (base === "java_hotkeys_fix") aliases.push("java_hotkeys", "module.java_hotkeys.name");
+
+  return Array.from(new Set(aliases));
+}
diff --git a/app/docs/articles/article-kit.tsx b/app/docs/articles/article-kit.tsx
new file mode 100644
index 0000000..ef66615
--- /dev/null
+++ b/app/docs/articles/article-kit.tsx
@@ -0,0 +1,125 @@
+import Image from "next/image";
+import Link from "next/link";
+import type { ReactNode } from "react";
+import {
+  BookOpen,
+  Box,
+  CheckCircle2,
+  Compass,
+  Download,
+  ExternalLink,
+  FileCode2,
+  Layers3,
+  ListChecks,
+  MonitorCog,
+  MonitorUp,
+  ShieldCheck,
+  Sparkles,
+  Smartphone,
+} from "lucide-react";
+import { CopyablePath } from "../CopyablePath";
+import { DocsHeading } from "../DocsHeading";
+import { SupportedVersions } from "../SupportedVersions";
+
+export {
+  BookOpen,
+  Box,
+  CheckCircle2,
+  Compass,
+  CopyablePath,
+  DocsHeading,
+  Download,
+  ExternalLink,
+  FileCode2,
+  Image,
+  Layers3,
+  Link,
+  ListChecks,
+  MonitorCog,
+  MonitorUp,
+  ShieldCheck,
+  Sparkles,
+  Smartphone,
+  SupportedVersions,
+};
+
+export const sectionFrameClass =
+  "scroll-mt-28 space-y-3 rounded-[var(--radius-2xl)] p-5 sm:p-7";
+
+export function CodeBlock({ children }: { children: string }) {
+  const tokenPattern = /"(?:\\.|[^"\\])*"|true|false|null|-?\d+(?:\.\d+)?|[{}[\]:,]/g;
+  const parts: ReactNode[] = [];
+  let cursor = 0;
+
+  for (const match of children.matchAll(tokenPattern)) {
+    const token = match[0];
+    const index = match.index ?? 0;
+
+    if (index > cursor) {
+      parts.push(children.slice(cursor, index));
+    }
+
+    const nextNonSpace = children.slice(index + token.length).match(/\S/)?.[0];
+    const isKey = token.startsWith("\"") && nextNonSpace === ":";
+    const isString = token.startsWith("\"");
+    const isBoolean = token === "true" || token === "false" || token === "null";
+    const isNumber = /^-?\d/.test(token);
+    const className = isKey
+      ? "text-[var(--color-accent-hi)]"
+      : isString
+        ? "text-[#ffd9dd]"
+        : isBoolean
+          ? "text-[var(--color-accent)]"
+          : isNumber
+            ? "text-[#d0a0a8]"
+            : "text-[var(--color-text-mute)]";
+
+    parts.push(
+      <span key={`${index}-${token}`} className={className}>
+        {token}
+      </span>,
+    );
+    cursor = index + token.length;
+  }
+
+  if (cursor < children.length) {
+    parts.push(children.slice(cursor));
+  }
+
+  return (
+    <pre
+      className="overflow-x-scroll rounded-[var(--radius-xl)] border border-white/[0.06] bg-black/35 p-4 font-mono text-[12px] leading-relaxed text-[var(--color-text)] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
+    >
+      <code className="whitespace-pre">{parts}</code>
+    </pre>
+  );
+}
+
+export function InlineCode({ children }: { children: ReactNode }) {
+  return (
+    <code className="rounded-[var(--radius-xs)] bg-black/30 px-1.5 py-0.5 font-mono text-[0.9em] text-white">
+      {children}
+    </code>
+  );
+}
+
+export function InfoCard({
+  icon,
+  title,
+  children,
+}: {
+  icon: ReactNode;
+  title: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="min-w-0 rounded-[var(--radius-xl)] bg-black/25 p-4">
+      <div className="mb-2 flex items-center gap-2 font-display text-[16px] font-semibold text-white">
+        {icon}
+        {title}
+      </div>
+      <div className="space-y-2">{children}</div>
+    </div>
+  );
+}
+
diff --git a/app/docs/articles/compatibility.tsx b/app/docs/articles/compatibility.tsx
new file mode 100644
index 0000000..5974fc5
--- /dev/null
+++ b/app/docs/articles/compatibility.tsx
@@ -0,0 +1,103 @@
+import type { DocsArticle } from "../docs-types";
+import {
+  BookOpen,
+  Box,
+  CheckCircle2,
+  CodeBlock,
+  Compass,
+  CopyablePath,
+  DocsHeading,
+  Download,
+  ExternalLink,
+  FileCode2,
+  Image,
+  InfoCard,
+  InlineCode,
+  Layers3,
+  Link,
+  ListChecks,
+  MonitorCog,
+  MonitorUp,
+  ShieldCheck,
+  Sparkles,
+  Smartphone,
+  SupportedVersions,
+  sectionFrameClass,
+} from "./article-kit";
+import {
+  blockableAliases,
+  blockableModules,
+  clearPayload,
+  configExample,
+  dllCssModulesByCategory,
+  flow,
+  nametagIcons,
+  privateConfigExample,
+  restrictOnePayload,
+  restrictThreePayload,
+  scriptingExample,
+  serverImplementationNotes,
+} from "./article-data";
+
+export const compatibilityArticle: DocsArticle = {
+    slug: "compatibility",
+    title: "Compatibility",
+    summary: "Supported platforms, minecraft version, and limitations.",
+    icon: CheckCircle2,
+    toc: [
+      { title: "Supported versions", href: "#supported-versions" },
+      { title: "Supported platforms", href: "#supported-targets" },
+      { title: "Compatibility limits", href: "#compatibility-limits" },
+    ],
+    render: () => (
+      <>
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="supported-versions">Supported versions</DocsHeading>
+          <p>
+            These Minecraft Bedrock versions are currently marked supported by Flarial&apos;s launcher data.
+          </p>
+          <SupportedVersions />
+        </section>
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="supported-targets">Supported platforms</DocsHeading>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <div className="rounded-[var(--radius-xl)] border border-white/[0.06] bg-black/20 p-4">
+              <div className="flex items-center gap-2 font-display text-[18px] font-semibold text-white">
+                <MonitorUp size={18} className="text-[var(--color-accent)]" />
+                Microsoft Windows
+              </div>
+              <ul className="mt-3 grid gap-2">
+                <li className="flex items-center gap-2">
+                  <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-accent)]" />
+                  Windows 11
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-accent)]" />
+                  Windows 10
+                </li>
+              </ul>
+            </div>
+            <div className="rounded-[var(--radius-xl)] border border-white/[0.06] bg-black/20 p-4">
+              <div className="flex items-center gap-2 font-display text-[18px] font-semibold text-white">
+                <Smartphone size={18} className="text-[var(--color-accent)]" />
+                Android
+              </div>
+              <ul className="mt-3 grid gap-2">
+                <li className="flex items-center gap-2">
+                  <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-accent)]" />
+                  Android 9 to 16
+                </li>
+              </ul>
+            </div>
+          </div>
+        </section>
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="compatibility-limits">Compatibility limits</DocsHeading>
+          <ul className="grid gap-2">
+            <li>New Minecraft updates may require a matching Flarial update before injection works.</li>
+            <li>Some modules are intentionally disabled or restricted on specific servers.</li>
+          </ul>
+        </section>
+      </>
+    ),
+  };
diff --git a/app/docs/articles/configs.tsx b/app/docs/articles/configs.tsx
new file mode 100644
index 0000000..544bd5c
--- /dev/null
+++ b/app/docs/articles/configs.tsx
@@ -0,0 +1,261 @@
+import type { DocsArticle } from "../docs-types";
+import {
+  BookOpen,
+  Box,
+  CheckCircle2,
+  CodeBlock,
+  Compass,
+  CopyablePath,
+  DocsHeading,
+  Download,
+  ExternalLink,
+  FileCode2,
+  Image,
+  InfoCard,
+  InlineCode,
+  Layers3,
+  Link,
+  ListChecks,
+  MonitorCog,
+  MonitorUp,
+  ShieldCheck,
+  Sparkles,
+  Smartphone,
+  SupportedVersions,
+  sectionFrameClass,
+} from "./article-kit";
+import {
+  blockableAliases,
+  blockableModules,
+  clearPayload,
+  configExample,
+  dllCssModulesByCategory,
+  flow,
+  nametagIcons,
+  privateConfigExample,
+  restrictOnePayload,
+  restrictThreePayload,
+  scriptingExample,
+  serverImplementationNotes,
+} from "./article-data";
+
+export const configsArticle: DocsArticle = {
+    slug: "configs",
+    title: "Configs",
+    summary: "Configuration system for Flarial Client.",
+    icon: Box,
+    toc: [],
+    render: () => (
+      <div className="grid gap-4">
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="overview">Overview</DocsHeading>
+          <p>
+            Flarial&apos;s config system keeps the client feeling personal between sessions. It tracks which modules
+            are enabled, keybinds, favorites, HUD positions, visual styling, text formats, client-wide options,
+            active config selection, and script settings.
+          </p>
+          <div className="grid gap-3 md:grid-cols-3">
+            <InfoCard icon={<CheckCircle2 size={16} className="text-[var(--color-accent)]" />} title="Per-profile">
+              <p>Each config is a JSON profile, usually starting at <InlineCode>default.json</InlineCode>.</p>
+            </InfoCard>
+            <InfoCard icon={<MonitorCog size={16} className="text-[var(--color-accent)]" />} title="Module-aware">
+              <p>Every registered module owns a settings object keyed by its display name.</p>
+            </InfoCard>
+            <InfoCard icon={<FileCode2 size={16} className="text-[var(--color-accent)]" />} title="Script-ready">
+              <p>Scripting modules store their own JSON files under the scripting config folder.</p>
+            </InfoCard>
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="storage-layout">Storage layout</DocsHeading>
+          <p>
+            The client builds its folders from <InlineCode>PlatformUtils::getRoamingPath()</InlineCode>. Modern
+            installs normally use the GDK-style folder first. UWP paths are still supported for older installs and
+            migration, but most users should look at the GDK paths.
+          </p>
+          <div className="grid gap-5">
+            <div className="space-y-3">
+              <h3 className="font-display text-[18px] font-semibold text-white">GDK</h3>
+              <div className="grid gap-3">
+                {[
+                  ["Client root", "%localappdata%\\Flarial\\Client", "Main folder for modern GDK/non-UWP installs."],
+                  ["Config directory", "%localappdata%\\Flarial\\Client\\Config", "Stores config profiles, PRIVATE, and Legacy imports."],
+                  ["Active profile", "%localappdata%\\Flarial\\Client\\Config\\default.json", "The default module-profile JSON file."],
+                  ["Private state", "%localappdata%\\Flarial\\Client\\Config\\PRIVATE", "Global client settings and the active config pointer."],
+                  ["Script configs", "%localappdata%\\Flarial\\Client\\Scripts\\Configs", "Separate settings files for scripting modules."],
+                ].map(([title, path, detail]) => (
+                  <div key={title} className="grid gap-2 rounded-[var(--radius-xl)] bg-black/25 p-4">
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <span className="font-display text-[15px] font-semibold text-white">{title}</span>
+                      <span className="rounded-full bg-[var(--color-bg-subtle)] px-2.5 py-1 text-[11px] text-[var(--color-text-mute)]">Run-ready</span>
+                    </div>
+                    <CopyablePath value={path} />
+                    <p className="text-[13px] text-[var(--color-text-mute)]">{detail}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <h3 className="font-display text-[18px] font-semibold text-white">UWP</h3>
+              <div className="grid gap-3">
+                {[
+                  ["Client root", "%localappdata%\\Packages\\Microsoft.MinecraftUWP_8wekyb3d8bbwe\\RoamingState\\Flarial", "Older UWP-style client folder."],
+                  ["Config directory", "%localappdata%\\Packages\\Microsoft.MinecraftUWP_8wekyb3d8bbwe\\RoamingState\\Flarial\\Config", "Older UWP config profile location."],
+                  ["Active profile", "%localappdata%\\Packages\\Microsoft.MinecraftUWP_8wekyb3d8bbwe\\RoamingState\\Flarial\\Config\\default.json", "Older UWP default module-profile JSON file."],
+                  ["Private state", "%localappdata%\\Packages\\Microsoft.MinecraftUWP_8wekyb3d8bbwe\\RoamingState\\Flarial\\Config\\PRIVATE", "Older UWP global client settings file."],
+                ].map(([title, path, detail]) => (
+                  <div key={title} className="grid gap-2 rounded-[var(--radius-xl)] bg-black/25 p-4">
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <span className="font-display text-[15px] font-semibold text-white">{title}</span>
+                      <span className="rounded-full bg-black/25 px-2.5 py-1 text-[11px] text-[var(--color-text-mute)]">Legacy</span>
+                    </div>
+                    <CopyablePath value={path} />
+                    <p className="text-[13px] text-[var(--color-text-mute)]">{detail}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="file-model">File model</DocsHeading>
+          <p>
+            Flarial separates global client state from module profile state. The active profile is stored in
+            <InlineCode>PRIVATE</InlineCode>, while module settings are saved into the selected <InlineCode>.json</InlineCode>
+            config file.
+          </p>
+          <div className="grid gap-4">
+            <div className="space-y-3">
+              <h3 className="font-display text-[17px] font-semibold text-white">PRIVATE</h3>
+              <p>
+                Stores client-wide settings such as fonts, blur intensity, VSync/Better Frames toggles, watermark
+                options, command prefix, animation preferences, RGB settings, and <InlineCode>currentConfig</InlineCode>.
+              </p>
+              <CodeBlock>{privateConfigExample}</CodeBlock>
+            </div>
+            <div className="space-y-3">
+              <h3 className="font-display text-[17px] font-semibold text-white">Config profile JSON</h3>
+              <p>
+                Stores a top-level object where each key is a module name. Each module value is that module&apos;s
+                settings object, generated through <InlineCode>Settings::ToJson()</InlineCode>.
+              </p>
+              <CodeBlock>{configExample}</CodeBlock>
+            </div>
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="stored-data">Stored data</DocsHeading>
+          <div className="grid gap-3 md:grid-cols-2">
+            <InfoCard icon={<Layers3 size={16} className="text-[var(--color-accent)]" />} title="Module state">
+              <p>Saved values include <InlineCode>enabled</InlineCode>, <InlineCode>favorite</InlineCode>, primary and extra keybinds, and each module&apos;s custom options.</p>
+            </InfoCard>
+            <InfoCard icon={<Compass size={16} className="text-[var(--color-accent)]" />} title="HUD placement">
+              <p>HUD modules persist <InlineCode>percentageX</InlineCode> and <InlineCode>percentageY</InlineCode>, so dragged overlays return to the same screen position.</p>
+            </InfoCard>
+            <InfoCard icon={<MonitorCog size={16} className="text-[var(--color-accent)]" />} title="Visual style">
+              <p>Scale, background, border, glow, shadow, opacity, color hex strings, RGB flags, text alignment, padding, rotation, and rectangle sizing can all be saved.</p>
+            </InfoCard>
+            <InfoCard icon={<FileCode2 size={16} className="text-[var(--color-accent)]" />} title="Value types">
+              <p>The settings container serializes primitive JSON values: booleans, integers, floats, and strings.</p>
+            </InfoCard>
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="load-save-flow">Load/save flow</DocsHeading>
+          <ol className="grid gap-3">
+            {[
+              "During client startup, Flarial creates the client, Config, Scripts, assets, logs, Crosshairs, and MessageLogger directories if needed.",
+              "Legacy config data is detected first. Older main.flarial and per-module .flarial files can be moved under Config\\Legacy and appended into the new settings format.",
+              "PRIVATE is loaded to discover the selected currentConfig, then that config JSON is parsed into Client::globalSettings.",
+              "Each module calls loadSettings(), reads its object from Client::globalSettings[moduleName], applies defaults for missing keys, then enables itself if its saved enabled value is true.",
+              "When saving, Flarial writes every module's Settings JSON into a temporary .tmp file, renames it over the active config, then saves script settings too.",
+            ].map((item, index) => (
+              <li key={item} className="grid grid-cols-[34px_minmax(0,1fr)] gap-3 rounded-[var(--radius-xl)] bg-black/25 p-4">
+                <span className="grid h-8 w-8 place-items-center rounded-full bg-[var(--color-accent)] font-display text-[13px] font-semibold text-white">
+                  {index + 1}
+                </span>
+                <span className="self-center text-[14px] leading-relaxed text-[var(--color-text)]">{item}</span>
+              </li>
+            ))}
+          </ol>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="config-actions">Config actions</DocsHeading>
+          <div className="grid gap-3 md:grid-cols-3">
+            <InfoCard icon={<FileCode2 size={16} className="text-[var(--color-accent)]" />} title="Create">
+              <p><InlineCode>createConfig</InlineCode> creates a file in the Config folder and immediately switches to it.</p>
+            </InfoCard>
+            <InfoCard icon={<CheckCircle2 size={16} className="text-[var(--color-accent)]" />} title="Switch">
+              <p><InlineCode>switchConfig</InlineCode> updates <InlineCode>currentConfig</InlineCode>, saves the old state, saves PRIVATE, then reloads PRIVATE.</p>
+            </InfoCard>
+            <InfoCard icon={<ShieldCheck size={16} className="text-[var(--color-accent)]" />} title="Delete">
+              <p>Deleting a config switches back to <InlineCode>default.json</InlineCode> first, then removes the selected file or folder.</p>
+            </InfoCard>
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="sharing-configs">Sharing configs</DocsHeading>
+          <p>
+            Configs are meant to be portable. A normal shared config is just the selected <InlineCode>.json</InlineCode>
+            profile from the Config folder. The <InlineCode>PRIVATE</InlineCode> file should usually stay yours because
+            it controls client-wide preferences and which config is active.
+          </p>
+          <Link
+            href="https://marketplace.flarial.xyz/"
+            target="_blank"
+            rel="noreferrer"
+            className="flex min-w-0 items-center justify-between gap-3 rounded-[var(--radius-xl)] border border-[rgba(255,35,58,0.22)] bg-black/25 p-4 text-white transition-colors hover:bg-[var(--color-bg-subtle)]"
+          >
+            <span className="flex min-w-0 items-center gap-3">
+              <span className="grid h-10 w-10 shrink-0 place-items-center rounded-[var(--radius-md)] bg-[var(--color-accent)]/15">
+                <Sparkles size={18} className="text-[var(--color-accent)]" />
+              </span>
+              <span className="min-w-0">
+                <span className="block font-display text-[16px] font-semibold">Configs Marketplace</span>
+                <span className="mt-1 block text-[13px] leading-relaxed text-[var(--color-text-mute)]">
+                  Browse and share community configs through the Flarial Marketplace.
+                </span>
+              </span>
+            </span>
+            <ExternalLink size={17} className="shrink-0 text-[var(--color-accent)]" />
+          </Link>
+          <div className="overflow-hidden rounded-[var(--radius-xl)] border border-white/[0.06] bg-black/25">
+            <div className="aspect-video">
+              <iframe
+                className="h-full w-full"
+                src="https://www.youtube-nocookie.com/embed/uUb3syJwjzc"
+                title="How to import configs in Flarial Client"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowFullScreen
+              />
+            </div>
+          </div>
+          <div className="grid gap-3 md:grid-cols-2">
+            <InfoCard icon={<FileCode2 size={16} className="text-[var(--color-accent)]" />} title="Share a single config">
+              <p>Open the configs folder and send the chosen <InlineCode>.json</InlineCode> file from the Config directory.</p>
+            </InfoCard>
+            <InfoCard icon={<Download size={16} className="text-[var(--color-accent)]" />} title="Import JSON">
+              <p>The receiver can then place it in their configs folder. Flarial&apos;s importer accepts <InlineCode>.json</InlineCode> files. After importing, the new config will be available for use after you reload the configs through the chat command <InlineCode>.configs reload</InlineCode>.</p>
+            </InfoCard>
+            <InfoCard icon={<Box size={16} className="text-[var(--color-accent)]" />} title="Legacy ZIPs">
+              <p>Legacy config ZIPs are extracted under <InlineCode>Config\Legacy</InlineCode>, then the client reloads config metadata so the imported entries can appear.</p>
+            </InfoCard>
+            <InfoCard icon={<ShieldCheck size={16} className="text-[var(--color-accent)]" />} title="What not to share">
+              <p>Avoid sharing <InlineCode>PRIVATE</InlineCode>, logs, caches, or unrelated folders. For most users, the profile JSON is the config.</p>
+            </InfoCard>
+          </div>
+          <div className="rounded-[var(--radius-xl)] bg-black/25 p-4">
+            <div className="mb-2 font-display text-[15px] font-semibold text-white">Fast path</div>
+            <CopyablePath value="%localappdata%\\Flarial\\Client\\Config" />
+          </div>
+        </section>
+      </div>
+    ),
+  };
diff --git a/app/docs/articles/flarial-nametag-icon.tsx b/app/docs/articles/flarial-nametag-icon.tsx
new file mode 100644
index 0000000..94567e5
--- /dev/null
+++ b/app/docs/articles/flarial-nametag-icon.tsx
@@ -0,0 +1,188 @@
+import type { DocsArticle } from "../docs-types";
+import {
+  BookOpen,
+  Box,
+  CheckCircle2,
+  CodeBlock,
+  Compass,
+  CopyablePath,
+  DocsHeading,
+  Download,
+  ExternalLink,
+  FileCode2,
+  Image,
+  InfoCard,
+  InlineCode,
+  Layers3,
+  Link,
+  ListChecks,
+  MonitorCog,
+  MonitorUp,
+  ShieldCheck,
+  Sparkles,
+  Smartphone,
+  SupportedVersions,
+  sectionFrameClass,
+} from "./article-kit";
+import {
+  blockableAliases,
+  blockableModules,
+  clearPayload,
+  configExample,
+  dllCssModulesByCategory,
+  flow,
+  nametagIcons,
+  privateConfigExample,
+  restrictOnePayload,
+  restrictThreePayload,
+  scriptingExample,
+  serverImplementationNotes,
+} from "./article-data";
+
+export const flarialNametagIconArticle: DocsArticle = {
+    slug: "flarial-nametag-icon",
+    title: "Flarial Nametag Icon",
+    summary: "In-game nametag logos for Flarial users and community roles.",
+    icon: Sparkles,
+    toc: [],
+    render: () => (
+      <div className="grid gap-4">
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="overview">Overview</DocsHeading>
+          <div className="grid gap-5 md:grid-cols-[minmax(0,1.2fr)_minmax(240px,0.8fr)] md:items-center">
+            <div className="space-y-3">
+              <p>
+                Flarial can show a small Flarial logo next to a player&apos;s nametag when that player is also using
+                Flarial. On servers, this makes it easy to spot other Flarial users without opening a menu or asking
+                in chat.
+              </p>
+              <p>
+                The icon is not only a client marker. Flarial has multiple in-game logo colors that represent default
+                users, boosters, supporters, media creators, staff, developers, and special community members.
+              </p>
+            </div>
+            <div className="overflow-hidden rounded-[var(--radius-xl)] border border-white/[0.06] bg-black/25">
+              <Image
+                src="/misc-imgs/ingame_logo.png"
+                alt="A Flarial logo shown beside a player's Minecraft nametag."
+                width={480}
+                height={436}
+                className="h-auto w-full object-cover"
+              />
+            </div>
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="how-it-appears">How it appears</DocsHeading>
+          <div className="grid gap-3 md:grid-cols-3">
+            <InfoCard icon={<CheckCircle2 size={16} className="text-[var(--color-accent)]" />} title="Beside the name">
+              <p>The logo appears next to the player&apos;s in-game nametag so it reads as part of the player identity line.</p>
+            </InfoCard>
+            <InfoCard icon={<MonitorCog size={16} className="text-[var(--color-accent)]" />} title="Server friendly">
+              <p>It is useful on multiplayer servers where multiple Flarial users may be near each other.</p>
+            </InfoCard>
+            <InfoCard icon={<ShieldCheck size={16} className="text-[var(--color-accent)]" />} title="Role aware">
+              <p>The logo color can represent a Flarial role, not just whether the player is using the client.</p>
+            </InfoCard>
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="opting-out">Opting out</DocsHeading>
+          <p>
+            You can choose not to advertise yourself through Flarial&apos;s API signal. In the client source, the ClickGUI
+            exposes a privacy toggle named <InlineCode>Anonymous on API</InlineCode>, plus separate display toggles for
+            hiding logos locally.
+          </p>
+          <div className="grid gap-3 md:grid-cols-2">
+            <InfoCard icon={<ShieldCheck size={16} className="text-[var(--color-accent)]" />} title="Hide your API identity">
+              <p>
+                Open ClickGUI, go to the settings area, and enable <InlineCode>Anonymous on API</InlineCode>. This is the
+                privacy option intended for staying anonymous on Flarial&apos;s API, which is the signal other clients use to
+                identify regular Flarial users.
+              </p>
+            </InfoCard>
+            <InfoCard icon={<MonitorCog size={16} className="text-[var(--color-accent)]" />} title="Hide icons on your screen">
+              <p>
+                Enable <InlineCode>No Flarial Logo</InlineCode> if you do not want your own client to draw Flarial logos
+                beside nametags. This only changes what you see locally; it is different from opting out of API visibility.
+              </p>
+            </InfoCard>
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="logo-types">Logo types</DocsHeading>
+          <p>
+            There are seven visible logo states in-game: six special role logos plus the red default logo that every
+            Flarial user gets automatically.
+          </p>
+          <div className="grid gap-3 md:grid-cols-2">
+            {nametagIcons.map((logo) => (
+              <div
+                key={logo.role}
+                className="min-w-0 rounded-[var(--radius-xl)] border border-white/[0.06] bg-black/20 p-4"
+                style={{ boxShadow: `inset 3px 0 0 ${logo.accent}` }}
+              >
+                <div className="flex items-start gap-3">
+                  <div className="grid h-14 w-14 shrink-0 place-items-center rounded-[var(--radius-lg)] bg-black/30">
+                    <img src={logo.image} alt="" className="h-10 w-10 object-contain" />
+                  </div>
+                  <div className="min-w-0">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <h3 className="font-display text-[18px] font-semibold text-white">{logo.name}</h3>
+                      <span className="rounded-full bg-[var(--color-bg-subtle)] px-2.5 py-1 text-[11px] text-white">
+                        {logo.role}
+                      </span>
+                      <span className="rounded-full bg-black/25 px-2.5 py-1 text-[11px] text-[var(--color-text-mute)]">
+                        {logo.color}
+                      </span>
+                    </div>
+                    <p className="mt-2 text-[13px] leading-relaxed text-[var(--color-text-mute)]">{logo.details}</p>
+                    {logo.href ? (
+                      <Link
+                        href={logo.href}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="mt-3 inline-flex items-center gap-1.5 text-[13px] font-semibold text-[var(--color-accent-hi)] hover:text-white"
+                      >
+                        Donate on Ko-fi
+                        <ExternalLink size={13} />
+                      </Link>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="claiming-notes">Claiming notes</DocsHeading>
+          <div className="grid gap-3">
+            <div className="rounded-[var(--radius-xl)] bg-black/25 p-4">
+              <div className="font-display text-[16px] font-semibold text-white">Supporter</div>
+              <p className="mt-2">
+                Donate through <Link href="https://ko-fi.com/flarialmc" target="_blank" rel="noreferrer" className="text-[var(--color-accent-hi)] hover:text-white">Ko-fi</Link>,
+                link your Discord to Ko-fi, then run <InlineCode>/claimrole</InlineCode> in <InlineCode>cmds</InlineCode>.
+              </p>
+            </div>
+            <div className="rounded-[var(--radius-xl)] bg-black/25 p-4">
+              <div className="font-display text-[16px] font-semibold text-white">Booster</div>
+              <p className="mt-2">
+                Boost the Flarial Discord server, then run <InlineCode>/claimrole</InlineCode> in <InlineCode>cmds</InlineCode>.
+                The logo only lasts while your boost is active.
+              </p>
+            </div>
+            <div className="rounded-[var(--radius-xl)] bg-black/25 p-4">
+              <div className="font-display text-[16px] font-semibold text-white">Command sensitivity</div>
+              <p className="mt-2">
+                <InlineCode>/claimrole</InlineCode> is case sensitive. Capital letters, spaces, and exact spelling matter.
+              </p>
+            </div>
+          </div>
+        </section>
+      </div>
+    ),
+  };
diff --git a/app/docs/articles/index.ts b/app/docs/articles/index.ts
new file mode 100644
index 0000000..d7c63e7
--- /dev/null
+++ b/app/docs/articles/index.ts
@@ -0,0 +1,20 @@
+import type { DocsArticle } from "../docs-types";
+import { whatIsFlarialArticle } from "./what-is-flarial";
+import { usageArticle } from "./usage";
+import { compatibilityArticle } from "./compatibility";
+import { configsArticle } from "./configs";
+import { modulesListArticle } from "./modules-list";
+import { flarialNametagIconArticle } from "./flarial-nametag-icon";
+import { moduleBlockingArticle } from "./module-blocking";
+import { scriptingApiArticle } from "./scripting-api";
+
+export const docsArticles: DocsArticle[] = [
+  whatIsFlarialArticle,
+  usageArticle,
+  compatibilityArticle,
+  configsArticle,
+  modulesListArticle,
+  flarialNametagIconArticle,
+  moduleBlockingArticle,
+  scriptingApiArticle,
+];
diff --git a/app/docs/articles/module-blocking.tsx b/app/docs/articles/module-blocking.tsx
new file mode 100644
index 0000000..b2638a3
--- /dev/null
+++ b/app/docs/articles/module-blocking.tsx
@@ -0,0 +1,147 @@
+import type { DocsArticle } from "../docs-types";
+import {
+  BookOpen,
+  Box,
+  CheckCircle2,
+  CodeBlock,
+  Compass,
+  CopyablePath,
+  DocsHeading,
+  Download,
+  ExternalLink,
+  FileCode2,
+  Image,
+  InfoCard,
+  InlineCode,
+  Layers3,
+  Link,
+  ListChecks,
+  MonitorCog,
+  MonitorUp,
+  ShieldCheck,
+  Sparkles,
+  Smartphone,
+  SupportedVersions,
+  sectionFrameClass,
+} from "./article-kit";
+import {
+  blockableAliases,
+  blockableModules,
+  clearPayload,
+  configExample,
+  dllCssModulesByCategory,
+  flow,
+  nametagIcons,
+  privateConfigExample,
+  restrictOnePayload,
+  restrictThreePayload,
+  scriptingExample,
+  serverImplementationNotes,
+} from "./article-data";
+
+export const moduleBlockingArticle: DocsArticle = {
+    slug: "module-blocking",
+    title: "Packet-based module blocking",
+    summary: "Server-driven feature restrictions for Flarial modules.",
+    icon: ShieldCheck,
+    toc: [
+      { title: "Packet format", href: "#packet-format" },
+      { title: "Examples", href: "#examples" },
+      { title: "Every blockable module", href: "#every-blockable-module" },
+      { title: "Client behavior", href: "#client-behavior" },
+      { title: "Server implementation notes", href: "#server-implementation-notes" },
+    ],
+    render: () => (
+      <>
+        <p>
+          Flarial listens for an inbound Bedrock <InlineCode>ScriptMessagePacket</InlineCode>. If the packet
+          has the expected Flarial header, the client parses the JSON payload and applies temporary server
+          restrictions to matching modules.
+        </p>
+        <ol className="grid gap-2">
+          {flow.map((item, index) => (
+            <li key={item} className="flex gap-3">
+              <span className="mt-0.5 grid h-6 w-6 shrink-0 place-items-center rounded-full bg-[var(--color-accent)] text-[11px] font-bold text-white">
+                {index + 1}
+              </span>
+              <span className="min-w-0 flex-1">{item}</span>
+            </li>
+          ))}
+        </ol>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="packet-format">Packet format</DocsHeading>
+          <p>Send a <InlineCode>ScriptMessagePacket</InlineCode> with this exact message id:</p>
+          <CodeBlock>{"flarial_client_event:restrict_features"}</CodeBlock>
+          <p>The message body is a JSON object. Each entry under <InlineCode>flarial_client_modules</InlineCode> describes one blocked module.</p>
+          <CodeBlock>{restrictThreePayload}</CodeBlock>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="examples">Examples</DocsHeading>
+          <div className="grid gap-4">
+            <div className="min-w-0 space-y-3">
+              <h3 className="font-display text-[17px] font-semibold text-white">Block one module</h3>
+              <CodeBlock>{restrictOnePayload}</CodeBlock>
+            </div>
+            <div className="min-w-0 space-y-3">
+              <h3 className="font-display text-[17px] font-semibold text-white">Clear packet restrictions</h3>
+              <CodeBlock>{clearPayload}</CodeBlock>
+            </div>
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="every-blockable-module">Every blockable module</DocsHeading>
+          <p>
+            This list is synced from the dll-css module registry on origin/main. Any registered module can be
+            blocked because the listener resolves against <InlineCode>ModuleManager::moduleMap</InlineCode>.
+          </p>
+          <div className="flex items-center gap-2 rounded-[var(--radius-xl)] bg-black/25 p-4 text-white">
+            <ListChecks size={17} className="text-[var(--color-accent)]" />
+            <span className="font-display font-semibold">{blockableModules.length} blockable module keys</span>
+          </div>
+          <div className="overflow-hidden rounded-[var(--radius-xl)] border border-white/[0.06]">
+            <div className="hidden grid-cols-[minmax(120px,0.8fr)_minmax(170px,1fr)_minmax(170px,1fr)] gap-3 bg-black/35 px-4 py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--color-text-mute)] sm:grid">
+              <span>Module</span>
+              <span>Recommended key</span>
+              <span>Accepted aliases</span>
+            </div>
+            <div className="divide-y divide-white/[0.05]">
+              {blockableModules.map(([name, token]) => (
+                <div key={token} className="grid gap-2 px-4 py-3 text-[13px] sm:grid-cols-[minmax(120px,0.8fr)_minmax(170px,1fr)_minmax(170px,1fr)] sm:gap-3">
+                  <span className="font-display font-semibold text-white">{name}</span>
+                  <code className="break-all text-[var(--color-accent-hi)]">{token}</code>
+                  <span className="break-words text-[var(--color-text-mute)]">{blockableAliases(token, name).join(", ")}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="client-behavior">Client behavior</DocsHeading>
+          <div className="grid gap-4 md:grid-cols-2">
+            <InfoCard icon={<ShieldCheck size={16} className="text-[var(--color-accent)]" />} title="When blocked">
+              <p>The module is marked server-restricted, disabled if currently active, and cannot be toggled back on while the restriction is active.</p>
+            </InfoCard>
+            <InfoCard icon={<FileCode2 size={16} className="text-[var(--color-accent)]" />} title="When cleared">
+              <p>Restrictions clear on disconnect, transfer, start-game, or when a replacement payload omits or clears a module.</p>
+            </InfoCard>
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="server-implementation-notes">Server implementation notes</DocsHeading>
+          <ul className="grid gap-2">
+            {serverImplementationNotes.map((note) => (
+              <li key={note} className="flex gap-3">
+                <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--color-accent)]" />
+                <span className="min-w-0 flex-1">{note}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      </>
+    ),
+  };
diff --git a/app/docs/articles/modules-list.tsx b/app/docs/articles/modules-list.tsx
new file mode 100644
index 0000000..751b43a
--- /dev/null
+++ b/app/docs/articles/modules-list.tsx
@@ -0,0 +1,91 @@
+import type { DocsArticle } from "../docs-types";
+import {
+  BookOpen,
+  Box,
+  CheckCircle2,
+  CodeBlock,
+  Compass,
+  CopyablePath,
+  DocsHeading,
+  Download,
+  ExternalLink,
+  FileCode2,
+  Image,
+  InfoCard,
+  InlineCode,
+  Layers3,
+  Link,
+  ListChecks,
+  MonitorCog,
+  MonitorUp,
+  ShieldCheck,
+  Sparkles,
+  Smartphone,
+  SupportedVersions,
+  sectionFrameClass,
+} from "./article-kit";
+import {
+  blockableAliases,
+  blockableModules,
+  clearPayload,
+  configExample,
+  dllCssModuleDetails,
+  dllCssModulesByCategory,
+  flow,
+  nametagIcons,
+  privateConfigExample,
+  restrictOnePayload,
+  restrictThreePayload,
+  scriptingExample,
+  serverImplementationNotes,
+} from "./article-data";
+
+export const modulesListArticle: DocsArticle = {
+    slug: "modules-list",
+    title: "Modules List",
+    summary: "Browse the current module catalog by category.",
+    icon: Layers3,
+    toc: [],
+    render: () => (
+      <div className="grid gap-4">
+        <div className="flex flex-col gap-2 rounded-[var(--radius-xl)] p-4 text-white sm:flex-row sm:items-center sm:justify-between sm:gap-3" style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <span className="font-display font-semibold">{dllCssModuleDetails.length} modules</span>
+          <span className="max-w-xl text-[12px] leading-relaxed text-[var(--color-text-mute)] sm:text-right">Note that some modules may be disabled for specific versions due to bugs and glitches</span>
+        </div>
+
+        {dllCssModulesByCategory.map((group) => (
+          <section key={group.category} className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+            <div className="flex items-center justify-between gap-3">
+              <DocsHeading id={`modules-${group.category.toLowerCase()}`}>{group.category}</DocsHeading>
+              <span className="rounded-full bg-black/25 px-3 py-1 text-[12px] text-[var(--color-text-mute)]">
+                {group.modules.length} modules
+              </span>
+            </div>
+              <div className="grid gap-3 md:grid-cols-2">
+                {group.modules.map((module) => (
+                  <div key={module.name} className="rounded-[var(--radius-xl)] border border-white/[0.06] bg-black/20 p-4">
+                    <div className="flex items-start gap-3">
+                      <div className="grid h-10 w-10 shrink-0 place-items-center rounded-[var(--radius-md)] bg-[var(--color-bg-modicon)]">
+                        <Image src={module.icon} alt="" width={28} height={28} className="h-7 w-7 object-contain" />
+                      </div>
+                      <div className="min-w-0">
+                        <h4 className="font-display text-[16px] font-semibold text-white">{module.name}</h4>
+                        <p className="mt-1 text-[13px] leading-relaxed text-[var(--color-text-mute)]">{module.description}</p>
+                      </div>
+                    </div>
+                    <div className="mt-3 flex flex-wrap gap-2">
+                      <span className="rounded-full bg-[var(--color-bg-subtle)] px-2.5 py-1 text-[11px] text-white">
+                        {module.category}
+                      </span>
+                      <span className="rounded-full bg-black/25 px-2.5 py-1 text-[11px] text-[var(--color-text-mute)]">
+                        {module.settingsCount} settings
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+          </section>
+        ))}
+      </div>
+    ),
+  };
diff --git a/app/docs/articles/scripting-api.tsx b/app/docs/articles/scripting-api.tsx
new file mode 100644
index 0000000..31a1a3c
--- /dev/null
+++ b/app/docs/articles/scripting-api.tsx
@@ -0,0 +1,200 @@
+import type { DocsArticle } from "../docs-types";
+import {
+  BookOpen,
+  Box,
+  CheckCircle2,
+  CodeBlock,
+  Compass,
+  CopyablePath,
+  DocsHeading,
+  Download,
+  ExternalLink,
+  FileCode2,
+  Image,
+  InfoCard,
+  InlineCode,
+  Layers3,
+  Link,
+  ListChecks,
+  MonitorCog,
+  MonitorUp,
+  ShieldCheck,
+  Sparkles,
+  Smartphone,
+  SupportedVersions,
+  sectionFrameClass,
+} from "./article-kit";
+import {
+  blockableAliases,
+  blockableModules,
+  clearPayload,
+  configExample,
+  dllCssModulesByCategory,
+  flow,
+  nametagIcons,
+  privateConfigExample,
+  restrictOnePayload,
+  restrictThreePayload,
+  scriptingExample,
+  serverImplementationNotes,
+} from "./article-data";
+
+export const scriptingApiArticle: DocsArticle = {
+    slug: "scripting-api",
+    title: "Scripting API",
+    summary: "Build Lua modules, commands, settings, and event-driven client extensions.",
+    icon: FileCode2,
+    toc: [
+      { title: "Overview", href: "#scripting-overview" },
+      { title: "What scripts can do", href: "#what-scripts-can-do" },
+      { title: "Project layout", href: "#project-layout" },
+      { title: "First module pattern", href: "#first-module-pattern" },
+      { title: "Workflow", href: "#workflow" },
+      { title: "Full API reference", href: "#full-api-reference" },
+    ],
+    render: () => (
+      <div className="grid gap-4">
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <div className="grid gap-5 md:grid-cols-[minmax(0,1.25fr)_minmax(240px,0.75fr)] md:items-center">
+            <div className="space-y-4">
+              <DocsHeading id="scripting-overview">Overview</DocsHeading>
+              <p>
+                Flarial Scripting lets you extend the client with Lua scripts that behave like lightweight modules
+                or commands. It is built for fast iteration: write a script, reload it in-game, then tune settings
+                and event handlers without rebuilding the client.
+              </p>
+              <p>
+                The scripting runtime is based on <InlineCode>Lua 5.4.7</InlineCode>. Use this article as the
+                website-level map, then use the dedicated scripting docs for exact API calls, signatures, and examples.
+              </p>
+              <Link
+                href="https://scripting.flarial.xyz/"
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-accent)] px-4 py-2 font-display text-[14px] font-semibold text-white transition-transform hover:-translate-y-0.5"
+              >
+                Open Scripting Docs
+                <ExternalLink size={15} />
+              </Link>
+            </div>
+            <div className="grid gap-3 rounded-[var(--radius-xl)] border border-white/[0.06] bg-black/25 p-4">
+              {[
+                ["Runtime", "Lua 5.4.7"],
+                ["Script types", "Modules and commands"],
+                ["Reload loop", ".lua reload"],
+                ["Editor helper", ".lua autocomplete"],
+              ].map(([label, value]) => (
+                <div key={label} className="flex items-center justify-between gap-3 rounded-[var(--radius-md)] bg-black/25 px-3 py-2">
+                  <span className="text-[12px] text-[var(--color-text-mute)]">{label}</span>
+                  <span className="font-display text-[13px] font-semibold text-white">{value}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="what-scripts-can-do">What scripts can do</DocsHeading>
+          <div className="grid gap-3 md:grid-cols-2">
+            <InfoCard icon={<Layers3 size={16} className="text-[var(--color-accent)]" />} title="Create modules">
+              <p>Scripts can define custom ClickGUI-visible modules with names, descriptions, toggles, and settings.</p>
+            </InfoCard>
+            <InfoCard icon={<FileCode2 size={16} className="text-[var(--color-accent)]" />} title="Add commands">
+              <p>Command scripts live beside module scripts and are useful for small tools, chat helpers, or workflow shortcuts.</p>
+            </InfoCard>
+            <InfoCard icon={<MonitorCog size={16} className="text-[var(--color-accent)]" />} title="Listen to events">
+              <p>Use event hooks to react to game, chat, player, GUI, network, and client-side changes exposed by the API.</p>
+            </InfoCard>
+            <InfoCard icon={<ShieldCheck size={16} className="text-[var(--color-accent)]" />} title="Use reviewed scripts">
+              <p>Community scripts can be distributed through the Flarial Marketplace after review by the Flarial team.</p>
+            </InfoCard>
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="project-layout">Project layout</DocsHeading>
+          <p>
+            Flarial keeps scripts under Minecraft&apos;s local app data so they travel with the client state.
+            Keep the whole <InlineCode>Scripts</InlineCode> folder open in your editor when using autocomplete.
+          </p>
+          <div className="grid gap-3">
+            <div className="rounded-[var(--radius-xl)] bg-black/25 p-4">
+              <div className="mb-2 font-display text-[15px] font-semibold text-white">Modules</div>
+              <CopyablePath value="%localappdata%\Flarial\Client\Scripts\Modules" />
+            </div>
+            <div className="rounded-[var(--radius-xl)] bg-black/25 p-4">
+              <div className="mb-2 font-display text-[15px] font-semibold text-white">Commands</div>
+              <CopyablePath value="%localappdata%\Flarial\Client\Scripts\Commands" />
+            </div>
+            <div className="rounded-[var(--radius-xl)] bg-black/25 p-4">
+              <div className="mb-2 font-display text-[15px] font-semibold text-white">Autocomplete</div>
+              <CopyablePath value="%localappdata%\Flarial\Client\Scripts\AutoComplete" />
+            </div>
+          </div>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="first-module-pattern">First module pattern</DocsHeading>
+          <p>
+            A module script starts with global metadata, declares settings in the global scope, then reacts to lifecycle
+            functions or events. Save the file as <InlineCode>.lua</InlineCode> inside the Modules folder.
+          </p>
+          <CodeBlock>{scriptingExample}</CodeBlock>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="workflow">Workflow</DocsHeading>
+          <ol className="grid gap-3">
+            {[
+              "Install Visual Studio Code and a Lua extension, then open the full Scripts folder.",
+              "Inject Flarial, run .lua autocomplete in chat, and add the AutoComplete folder to the Lua extension third-party library setting.",
+              "Create a Lua file in Modules or Commands with a name and description.",
+              "Run .lua reload in chat after edits, then enable the module from ClickGUI or run the command in-game.",
+              "Move from the quick pattern here to the API docs when you need client, game, GUI, ImGui, filesystem, or utility APIs.",
+            ].map((item, index) => (
+              <li key={item} className="grid grid-cols-[34px_minmax(0,1fr)] gap-3 rounded-[var(--radius-xl)] bg-black/25 p-4">
+                <span className="grid h-8 w-8 place-items-center rounded-full bg-[var(--color-accent)] font-display text-[13px] font-semibold text-white">
+                  {index + 1}
+                </span>
+                <span className="self-center text-[14px] leading-relaxed text-[var(--color-text)]">{item}</span>
+              </li>
+            ))}
+          </ol>
+        </section>
+
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="full-api-reference">Full API reference</DocsHeading>
+          <p>
+            The full documentation covers the script object, client APIs, audio, network, events, player, server,
+            GUI constraints, settings, ImGui draw lists, filesystem helpers, globals, objects, and utilities.
+          </p>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <Link
+              href="https://scripting.flarial.xyz/"
+              target="_blank"
+              rel="noreferrer"
+              className="flex min-w-0 items-center justify-between gap-3 rounded-[var(--radius-xl)] bg-black/25 p-4 text-white transition-colors hover:bg-[var(--color-bg-subtle)]"
+            >
+              <span>
+                <span className="block font-display text-[16px] font-semibold">API documentation</span>
+                <span className="mt-1 block text-[12px] text-[var(--color-text-mute)]">Reference pages and exact signatures</span>
+              </span>
+              <ExternalLink size={17} className="shrink-0 text-[var(--color-accent)]" />
+            </Link>
+            <Link
+              href="https://marketplace.flarial.xyz/"
+              target="_blank"
+              rel="noreferrer"
+              className="flex min-w-0 items-center justify-between gap-3 rounded-[var(--radius-xl)] bg-black/25 p-4 text-white transition-colors hover:bg-[var(--color-bg-subtle)]"
+            >
+              <span>
+                <span className="block font-display text-[16px] font-semibold">Flarial Marketplace</span>
+                <span className="mt-1 block text-[12px] text-[var(--color-text-mute)]">Find reviewed community scripts</span>
+              </span>
+              <ExternalLink size={17} className="shrink-0 text-[var(--color-accent)]" />
+            </Link>
+          </div>
+        </section>
+      </div>
+    ),
+  };
diff --git a/app/docs/articles/usage.tsx b/app/docs/articles/usage.tsx
new file mode 100644
index 0000000..c7ac9a4
--- /dev/null
+++ b/app/docs/articles/usage.tsx
@@ -0,0 +1,186 @@
+import type { DocsArticle } from "../docs-types";
+import {
+  BookOpen,
+  Box,
+  CheckCircle2,
+  CodeBlock,
+  Compass,
+  CopyablePath,
+  DocsHeading,
+  Download,
+  ExternalLink,
+  FileCode2,
+  Image,
+  InfoCard,
+  InlineCode,
+  Layers3,
+  Link,
+  ListChecks,
+  MonitorCog,
+  MonitorUp,
+  ShieldCheck,
+  Sparkles,
+  Smartphone,
+  SupportedVersions,
+  sectionFrameClass,
+} from "./article-kit";
+import {
+  blockableAliases,
+  blockableModules,
+  clearPayload,
+  configExample,
+  dllCssModulesByCategory,
+  flow,
+  nametagIcons,
+  privateConfigExample,
+  restrictOnePayload,
+  restrictThreePayload,
+  scriptingExample,
+  serverImplementationNotes,
+} from "./article-data";
+
+export const usageArticle: DocsArticle = {
+    slug: "usage",
+    title: "Usage",
+    summary: "Install, inject, and start configuring Flarial.",
+    icon: Download,
+    toc: [
+      { title: "Download", href: "#download" },
+      { title: "Inject", href: "#inject" },
+      { title: "Use", href: "#use" },
+    ],
+    render: () => (
+      <>
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="download">Download</DocsHeading>
+          <p>
+            Start with the Flarial Launcher whenever possible. It handles supported versions, launch state,
+            and automatic injection for the normal setup path.
+          </p>
+          <div className="flex flex-wrap gap-3">
+            <Link
+              href="/download/"
+              className="inline-flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-accent)] px-4 py-2.5 font-display text-[14px] font-semibold text-white shadow-[var(--shadow-glow)]"
+            >
+              <Download size={16} />
+              Open download tab
+            </Link>
+            <a
+              href="https://github.com/flarialmc/newcdn/raw/refs/heads/main/dll/latest.dll"
+              className="inline-flex items-center gap-2 rounded-[var(--radius-md)] bg-black/25 px-4 py-2.5 font-display text-[14px] font-semibold text-white hover:bg-[var(--color-bg-subtle)]"
+            >
+              <ExternalLink size={16} className="text-[var(--color-accent)]" />
+              Download latest DLL
+            </a>
+          </div>
+          <div className="rounded-[var(--radius-xl)] border border-[rgba(255,35,58,0.22)] bg-black/20 p-4">
+            <div className="font-display text-[16px] font-semibold text-white">Direct DLL note</div>
+            <p className="mt-2">
+              The direct DLL is useful if the launcher path is giving you trouble, but it will not inject itself.
+              You will need a DLL injector to inject the DLL into Minecraft.
+            </p>
+          </div>
+        </section>
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="inject">Inject</DocsHeading>
+          <p>There are 2 methods to inject Flarial:</p>
+          <div className="grid gap-4">
+            <div className="rounded-[var(--radius-xl)] border border-white/[0.06] bg-black/20 p-4">
+              <div className="flex items-center gap-2 font-display text-[18px] font-semibold text-white">
+                <Box size={18} className="text-[var(--color-accent)]" />
+                Flarial Launcher method
+                <span className="rounded-full bg-[var(--color-accent)] px-2.5 py-1 font-mono text-[10px] uppercase tracking-wider text-white">
+                  Recommended
+                </span>
+              </div>
+              <ol className="mt-3 grid gap-3">
+                {[
+                  "Open the Flarial Launcher.",
+                  "Optional: go to settings, then the versions tab, to download and launch a specific Minecraft version supported by Flarial.",
+                  "Press Play or Launch on the homepage.",
+                  "Wait a few seconds for Minecraft to launch.",
+                  "Flarial should automatically inject once you reach the title screen.",
+                  <>
+                    If it does not inject, join our{" "}
+                    <a
+                      href="https://flarial.xyz/discord"
+                      className="font-semibold text-white underline decoration-[var(--color-accent)] decoration-2 underline-offset-4"
+                    >
+                      Discord server
+                    </a>{" "}
+                    to get support.
+                  </>,
+                ].map((step, index) => (
+                  <li key={index} className="flex gap-3">
+                    <span className="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-[var(--color-accent)] text-[11px] font-bold text-white">
+                      {index + 1}
+                    </span>
+                    <span className="min-w-0 flex-1">{step}</span>
+                  </li>
+                ))}
+              </ol>
+            </div>
+            <div className="rounded-[var(--radius-xl)] border border-white/[0.06] bg-black/20 p-4">
+              <div className="flex items-center gap-2 font-display text-[18px] font-semibold text-white">
+                <FileCode2 size={18} className="text-[var(--color-accent)]" />
+                Generic DLL Injector method
+              </div>
+              <ol className="mt-3 grid gap-3">
+                {[
+                  <>
+                    Make sure you have a DLL injector. If you do not have one, try{" "}
+                    <a
+                      href="https://github.com/ambiennt/MCBE-DLL-Injector"
+                      className="font-semibold text-white underline decoration-[var(--color-accent)] decoration-2 underline-offset-4"
+                    >
+                      MCBE-DLL-Injector
+                    </a>
+                    .
+                  </>,
+                  "Open the DLL injector app.",
+                  "Select the Flarial DLL file.",
+                  "Launch Minecraft before clicking inject.",
+                  "Inject while you are on the title screen or inside a world. Injecting before the game is initialized might cause it to crash.",
+                ].map((step, index) => (
+                  <li key={index} className="flex gap-3">
+                    <span className="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-[var(--color-accent)] text-[11px] font-bold text-white">
+                      {index + 1}
+                    </span>
+                    <span className="min-w-0 flex-1">{step}</span>
+                  </li>
+                ))}
+              </ol>
+            </div>
+          </div>
+        </section>
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="use">Use</DocsHeading>
+          <p>
+            Once Flarial is injected and the welcome notification appears, you should be able to open the
+            ClickGUI by pressing <span className="font-semibold text-white">K</span> on your keyboard.
+            If your ClickGUI key is set to something else, use the key shown in the notification text:
+            <span className="font-semibold text-white"> Click {"{}"} to open the menu in-game</span>.
+          </p>
+          <div className="overflow-hidden rounded-[var(--radius-xl)] border border-white/[0.06] bg-black/20">
+            <div className="relative min-h-[150px] bg-[linear-gradient(135deg,#477239,#5d8d47_35%,#7853a5_36%,#a96bd3_42%,#588544_43%,#426b35)] p-5">
+              <div className="absolute inset-0 opacity-30" style={{ backgroundImage: "linear-gradient(45deg, rgba(0,0,0,.18) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.12) 25%, transparent 25%)", backgroundSize: "32px 32px" }} />
+              <div className="relative mx-auto flex max-w-[560px] flex-col items-center gap-3 pt-2">
+                <div className="rounded-[var(--radius-md)] bg-[var(--color-accent)] px-5 py-2 font-display text-[16px] font-semibold text-white shadow-[0_10px_24px_rgba(0,0,0,0.28)]">
+                  Join our discord! https://flarial.xyz/discord
+                </div>
+                <div className="rounded-[var(--radius-md)] bg-[var(--color-accent)] px-5 py-2 font-display text-[16px] font-semibold text-white shadow-[0_10px_24px_rgba(0,0,0,0.28)]">
+                  Click K to open the menu in-game.
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="rounded-[var(--radius-xl)] border border-[rgba(255,35,58,0.28)] bg-black/25 p-4">
+            <div className="font-display text-[16px] font-semibold text-white">Important</div>
+            <p className="mt-1">
+              The ClickGUI can only be opened while you are in a world.
+            </p>
+          </div>
+        </section>
+      </>
+    ),
+  };
diff --git a/app/docs/articles/what-is-flarial.tsx b/app/docs/articles/what-is-flarial.tsx
new file mode 100644
index 0000000..a707232
--- /dev/null
+++ b/app/docs/articles/what-is-flarial.tsx
@@ -0,0 +1,78 @@
+import type { DocsArticle } from "../docs-types";
+import {
+  BookOpen,
+  Box,
+  CheckCircle2,
+  CodeBlock,
+  Compass,
+  CopyablePath,
+  DocsHeading,
+  Download,
+  ExternalLink,
+  FileCode2,
+  Image,
+  InfoCard,
+  InlineCode,
+  Layers3,
+  Link,
+  ListChecks,
+  MonitorCog,
+  MonitorUp,
+  ShieldCheck,
+  Sparkles,
+  Smartphone,
+  SupportedVersions,
+  sectionFrameClass,
+} from "./article-kit";
+import {
+  blockableAliases,
+  blockableModules,
+  clearPayload,
+  configExample,
+  dllCssModulesByCategory,
+  flow,
+  nametagIcons,
+  privateConfigExample,
+  restrictOnePayload,
+  restrictThreePayload,
+  scriptingExample,
+  serverImplementationNotes,
+} from "./article-data";
+
+export const whatIsFlarialArticle: DocsArticle = {
+    slug: "what-is-flarial",
+    title: "What is Flarial",
+    summary: "A quick overview of what Flarial is.",
+    icon: BookOpen,
+    toc: [
+      { title: "Overview", href: "#overview" },
+      { title: "Features", href: "#features" },
+    ],
+    render: () => (
+      <>
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="overview">Overview</DocsHeading>
+          <p>
+            Flarial is a Minecraft Bedrock Utility Client focused on customization, quality-of-life features,
+            HUD control, rendering options, and server-aware behavior. With over 100+ modules, you can configure
+            Flarial however you want.
+          </p>
+        </section>
+        <section className={sectionFrameClass} style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <DocsHeading id="features">Features</DocsHeading>
+          <p>Everything you need to enhance your gameplay experience.</p>
+          <div className="grid gap-4 md:grid-cols-3">
+            <InfoCard icon={<Layers3 size={16} className="text-[var(--color-accent)]" />} title="Countless Mods">
+              <p>Access a wide variety of utility modules designed to enhance your gameplay experience or make your own.</p>
+            </InfoCard>
+            <InfoCard icon={<MonitorCog size={16} className="text-[var(--color-accent)]" />} title="Sleek UI">
+              <p>Modern, intuitive interface designed for seamless navigation and control.</p>
+            </InfoCard>
+            <InfoCard icon={<CheckCircle2 size={16} className="text-[var(--color-accent)]" />} title="User-Friendly">
+              <p>Plug-and-play, with no additional configuration required (but still possible).</p>
+            </InfoCard>
+          </div>
+        </section>
+      </>
+    ),
+  };
diff --git a/app/docs/dll-css-module-details.ts b/app/docs/dll-css-module-details.ts
new file mode 100644
index 0000000..1c26f91
--- /dev/null
+++ b/app/docs/dll-css-module-details.ts
@@ -0,0 +1,1103 @@
+export type DllCssModuleCategory = "Combat" | "HUD" | "Misc" | "Movement" | "Render" | "Utility";
+
+export type DllCssModuleDetail = {
+  name: string;
+  description: string;
+  iconResource: string;
+  icon: string;
+  settingsCount: number;
+  category: DllCssModuleCategory;
+  source: string;
+};
+
+export const dllCssModuleDetails = [
+  {
+    "name": "Block Hit",
+    "description": "Sword Blocking Animation like Java (visual only)",
+    "iconResource": "IDR_SWORD_PNG",
+    "icon": "/mod-icons/sword.png",
+    "settingsCount": 0,
+    "category": "Combat",
+    "source": "BlockHit"
+  },
+  {
+    "name": "Bow Sensitivity",
+    "description": "Lowers sensitivity when aiming with a bow",
+    "iconResource": "IDR_BOWSENS_PNG",
+    "icon": "/mod-icons/bow_sens.png",
+    "settingsCount": 4,
+    "category": "Combat",
+    "source": "BowSensitivity"
+  },
+  {
+    "name": "CPS Limiter",
+    "description": "Limit how many clicks you can register per second.",
+    "iconResource": "IDR_STOP_PNG",
+    "icon": "/mod-icons/stop.png",
+    "settingsCount": 3,
+    "category": "Combat",
+    "source": "CPSLimiter"
+  },
+  {
+    "name": "Crystal Optimizer",
+    "description": "Instantly removes end crystals client-side on attack for faster crystal PvP.",
+    "iconResource": "IDR_SKULL_PNG",
+    "icon": "/mod-icons/skull.png",
+    "settingsCount": 0,
+    "category": "Combat",
+    "source": "CrystalOptimizer"
+  },
+  {
+    "name": "Durability Warning",
+    "description": "Notifies you when a tool reaches low durability.",
+    "iconResource": "IDR_BLOCK_BREAK_INDICATOR_PNG",
+    "icon": "/mod-icons/block_break_indicator.png",
+    "settingsCount": 1,
+    "category": "Combat",
+    "source": "DurabilityWarning"
+  },
+  {
+    "name": "Hit Ping",
+    "description": "Measures your hit delay!",
+    "iconResource": "IDR_PING_PNG",
+    "icon": "/mod-icons/ping.png",
+    "settingsCount": 29,
+    "category": "Combat",
+    "source": "HitPing"
+  },
+  {
+    "name": "Hitbox",
+    "description": "Displays hitboxes of entities",
+    "iconResource": "IDR_BLOCK_PNG",
+    "icon": "/mod-icons/block.png",
+    "settingsCount": 14,
+    "category": "Combat",
+    "source": "Hitbox"
+  },
+  {
+    "name": "Hurt Color",
+    "description": "Change the color when you hit entities.",
+    "iconResource": "IDR_HURT_PNG",
+    "icon": "/mod-icons/hurt.png",
+    "settingsCount": 1,
+    "category": "Combat",
+    "source": "HurtColor"
+  },
+  {
+    "name": "No Hurt Cam",
+    "description": "Disables hurt camera animation",
+    "iconResource": "IDR_REACH_PNG",
+    "icon": "/mod-icons/reach.png",
+    "settingsCount": 0,
+    "category": "Combat",
+    "source": "NoHurtCam"
+  },
+  {
+    "name": "Opponent Reach",
+    "description": "Shows your opponent's last hit range!",
+    "iconResource": "IDR_REACH_PNG",
+    "icon": "/mod-icons/reach.png",
+    "settingsCount": 30,
+    "category": "Combat",
+    "source": "OpponentReach"
+  },
+  {
+    "name": "Reach Counter",
+    "description": "Displays your last hit range in blocks.",
+    "iconResource": "IDR_REACH_PNG",
+    "icon": "/mod-icons/reach.png",
+    "settingsCount": 29,
+    "category": "Combat",
+    "source": "ReachCounter"
+  },
+  {
+    "name": "ArmorHUD",
+    "description": "Displays the armor you're currently wearing.",
+    "iconResource": "IDR_CHESTPLATE_PNG",
+    "icon": "/mod-icons/chestplate.png",
+    "settingsCount": 32,
+    "category": "HUD",
+    "source": "ArmorHUD"
+  },
+  {
+    "name": "Arrow Counter",
+    "description": "Counts how many arrows you have in your inventory.",
+    "iconResource": "IDR_ARROW_PNG",
+    "icon": "/mod-icons/arrow.png",
+    "settingsCount": 30,
+    "category": "HUD",
+    "source": "ArrowCounter"
+  },
+  {
+    "name": "Audio Controller",
+    "description": "Allows you to control the currently playing audio in Windows.",
+    "iconResource": "IDR_SKULL_PNG",
+    "icon": "/mod-icons/skull.png",
+    "settingsCount": 32,
+    "category": "HUD",
+    "source": "AudioOverlay"
+  },
+  {
+    "name": "Better Hunger Bar",
+    "description": "Adds a hunger and saturation overlay similar to AppleSkin.",
+    "iconResource": "IDR_BETTERHUNGERBAR_PNG",
+    "icon": "/mod-icons/betterhungerbar.png",
+    "settingsCount": 9,
+    "category": "HUD",
+    "source": "BetterHungerBar"
+  },
+  {
+    "name": "Better Inventory",
+    "description": "Enhanced inventory tooltips with shulker previews, durability info, and more!",
+    "iconResource": "IDR_INVENTORY_PNG",
+    "icon": "/mod-icons/inventory.png",
+    "settingsCount": 0,
+    "category": "HUD",
+    "source": "BetterInventory"
+  },
+  {
+    "name": "Break Progress",
+    "description": "Visual indicator to show the progress of breaking a block.",
+    "iconResource": "IDR_BLOCK_BREAK_INDICATOR_PNG",
+    "icon": "/mod-icons/block_break_indicator.png",
+    "settingsCount": 35,
+    "category": "HUD",
+    "source": "BlockBreakIndicator"
+  },
+  {
+    "name": "Clear Chat",
+    "description": "Clears the chat's background",
+    "iconResource": "IDR_CLEARBG_PNG",
+    "icon": "/mod-icons/clearbg.png",
+    "settingsCount": 0,
+    "category": "HUD",
+    "source": "ClearChat"
+  },
+  {
+    "name": "Clear Scoreboard",
+    "description": "Clears the scoreboard from the screen.",
+    "iconResource": "IDR_CLEARBG_PNG",
+    "icon": "/mod-icons/clearbg.png",
+    "settingsCount": 0,
+    "category": "HUD",
+    "source": "ClearScoreboard"
+  },
+  {
+    "name": "Clock",
+    "description": "Displays your current local or ingame time.",
+    "iconResource": "IDR_TIME_PNG",
+    "icon": "/mod-icons/time.png",
+    "settingsCount": 35,
+    "category": "HUD",
+    "source": "Time"
+  },
+  {
+    "name": "Combo",
+    "description": "Keeps track of consecutive hits.",
+    "iconResource": "IDR_COMBO_PNG",
+    "icon": "/mod-icons/combo.png",
+    "settingsCount": 30,
+    "category": "HUD",
+    "source": "ComboCounter"
+  },
+  {
+    "name": "Compact Chat",
+    "description": "Stacks duplicate messages in chat.",
+    "iconResource": "IDR_COMPACTCHAT_PNG",
+    "icon": "/mod-icons/compactchat.png",
+    "settingsCount": 5,
+    "category": "HUD",
+    "source": "CompactChat"
+  },
+  {
+    "name": "Coordinates",
+    "description": "Shows your XYZ position in game.",
+    "iconResource": "IDR_COORDINATES_PNG",
+    "icon": "/mod-icons/coordinates.png",
+    "settingsCount": 42,
+    "category": "HUD",
+    "source": "Coordinates"
+  },
+  {
+    "name": "CPS",
+    "description": "Counts your Clicks per second.",
+    "iconResource": "IDR_CURSOR_PNG",
+    "icon": "/mod-icons/cursor.png",
+    "settingsCount": 30,
+    "category": "HUD",
+    "source": "CPS"
+  },
+  {
+    "name": "Death Logger",
+    "description": "Logs your coordinates in chat on death.",
+    "iconResource": "IDR_DEATHLOGGER_PNG",
+    "icon": "/mod-icons/deathlogger.png",
+    "settingsCount": 3,
+    "category": "HUD",
+    "source": "DeathLogger"
+  },
+  {
+    "name": "Delux Overlay",
+    "description": "Displays real-time game statistics from Delux Club API.",
+    "iconResource": "IDR_PING_PNG",
+    "icon": "/mod-icons/ping.png",
+    "settingsCount": 31,
+    "category": "HUD",
+    "source": "InGameOverlay"
+  },
+  {
+    "name": "DirectionHUD",
+    "description": "Shows a compass showing your direction",
+    "iconResource": "IDR_COMPASS_PNG",
+    "icon": "/mod-icons/compass.png",
+    "settingsCount": 48,
+    "category": "HUD",
+    "source": "DirectionHUD"
+  },
+  {
+    "name": "Discord RPC",
+    "description": "Customizable Discord Rich Presence display.",
+    "iconResource": "IDR_DISCORD_PNG",
+    "icon": "/mod-icons/discord-white.png",
+    "settingsCount": 3,
+    "category": "HUD",
+    "source": "Misc/DiscordRPC"
+  },
+  {
+    "name": "DVD Screen",
+    "description": "Overlays the DVD Screensaver",
+    "iconResource": "IDR_SKULL_PNG",
+    "icon": "/mod-icons/skull.png",
+    "settingsCount": 3,
+    "category": "HUD",
+    "source": "DVD Screen"
+  },
+  {
+    "name": "Entity Counter",
+    "description": "Counts the entities in the surrounding area",
+    "iconResource": "IDR_ENTITYCOUNTER_PNG",
+    "icon": "/mod-icons/nametag.png",
+    "settingsCount": 29,
+    "category": "HUD",
+    "source": "EntityCounter"
+  },
+  {
+    "name": "Experience Info",
+    "description": "Displays detailed XP information including level, progress, and XP counts.",
+    "iconResource": "IDR_LIKE_PNG",
+    "icon": "/mod-icons/like.png",
+    "settingsCount": 32,
+    "category": "HUD",
+    "source": "ExperienceInfo"
+  },
+  {
+    "name": "Faster Inventory",
+    "description": "Makes inventory opening ping-independent",
+    "iconResource": "IDR_INVENTORY_PNG",
+    "icon": "/mod-icons/inventory.png",
+    "settingsCount": 0,
+    "category": "HUD",
+    "source": "FasterInventory"
+  },
+  {
+    "name": "FPS",
+    "description": "Shows how much Frames Per Second (FPS) your device is rendering.",
+    "iconResource": "IDR_FPS_PNG",
+    "icon": "/mod-icons/fps.png",
+    "settingsCount": 31,
+    "category": "HUD",
+    "source": "FPS"
+  },
+  {
+    "name": "Hive Statistics",
+    "description": "Show players statistics in game",
+    "iconResource": "IDR_HIVE_STATS_PNG",
+    "icon": "/mod-icons/hivestats.png",
+    "settingsCount": 146,
+    "category": "HUD",
+    "source": "HiveStat"
+  },
+  {
+    "name": "Inventory HUD",
+    "description": "Displays your inventory on your HUD",
+    "iconResource": "IDR_CHESTPLATE_PNG",
+    "icon": "/mod-icons/chestplate.png",
+    "settingsCount": 26,
+    "category": "HUD",
+    "source": "InventoryHUD"
+  },
+  {
+    "name": "IP Display",
+    "description": "Displays the current server IP you're playing on.",
+    "iconResource": "IDR_SERVER_IP_PNG",
+    "icon": "/mod-icons/server-ip.png",
+    "settingsCount": 30,
+    "category": "HUD",
+    "source": "IPDisplay"
+  },
+  {
+    "name": "Item Counter",
+    "description": "Item Counter",
+    "iconResource": "IDR_MULTIPLIER_PNG",
+    "icon": "/mod-icons/multiplier.png",
+    "settingsCount": 35,
+    "category": "HUD",
+    "source": "ItemCounter"
+  },
+  {
+    "name": "Java Debug Menu",
+    "description": "Displays Java-style debug information. Similar to F3 menu in Minecraft Java Edition.",
+    "iconResource": "IDR_F3_PNG",
+    "icon": "/mod-icons/f3.png",
+    "settingsCount": 36,
+    "category": "HUD",
+    "source": "DebugMenu"
+  },
+  {
+    "name": "JavaInventoryHotkeys",
+    "description": "No description provided in module constructor.",
+    "iconResource": "IDR_KEYBOARD_PNG",
+    "icon": "/mod-icons/keyboard.png",
+    "settingsCount": 0,
+    "category": "HUD",
+    "source": "JavaInventoryHotkeys"
+  },
+  {
+    "name": "Keystrokes",
+    "description": "Displays real-time information about your WASD and mouse inputs.",
+    "iconResource": "IDR_KEYSTROKES_PNG",
+    "icon": "/mod-icons/keystrokes.png",
+    "settingsCount": 46,
+    "category": "HUD",
+    "source": "Keystrokes"
+  },
+  {
+    "name": "Locator Bar",
+    "description": "Enhances the vanilla locator bar with player head icons.",
+    "iconResource": "IDR_COMPASS_PNG",
+    "icon": "/mod-icons/compass.png",
+    "settingsCount": 0,
+    "category": "HUD",
+    "source": "LocatorBar"
+  },
+  {
+    "name": "Memory",
+    "description": "Shows your current system RAM usage.",
+    "iconResource": "IDR_MEMORY_PNG",
+    "icon": "/mod-icons/memory.png",
+    "settingsCount": 29,
+    "category": "HUD",
+    "source": "Memory"
+  },
+  {
+    "name": "Message Logger",
+    "description": "Saves chat messages into a file.",
+    "iconResource": "IDR_COMPACTCHAT_PNG",
+    "icon": "/mod-icons/compactchat.png",
+    "settingsCount": 2,
+    "category": "HUD",
+    "source": "MessageLogger"
+  },
+  {
+    "name": "Movable Chat",
+    "description": "Ability to move the chat.",
+    "iconResource": "IDR_MOVABLE_PNG",
+    "icon": "/mod-icons/movable.png",
+    "settingsCount": 3,
+    "category": "HUD",
+    "source": "MovableChat"
+  },
+  {
+    "name": "MovableBossbar",
+    "description": "Makes the Minecraft \" + mname + \" movable.",
+    "iconResource": "IDR_MOVABLE_PNG",
+    "icon": "/mod-icons/movable.png",
+    "settingsCount": 0,
+    "category": "HUD",
+    "source": "MovableBossbar"
+  },
+  {
+    "name": "MovableCoordinates",
+    "description": "Makes the Minecraft \" + mname + \" movable.",
+    "iconResource": "IDR_MOVABLE_PNG",
+    "icon": "/mod-icons/movable.png",
+    "settingsCount": 0,
+    "category": "HUD",
+    "source": "MovableCoordinates"
+  },
+  {
+    "name": "MovableDayCounter",
+    "description": "Makes the Minecraft \" + mname + \" movable.",
+    "iconResource": "IDR_MOVABLE_PNG",
+    "icon": "/mod-icons/movable.png",
+    "settingsCount": 0,
+    "category": "HUD",
+    "source": "MovableDayCounter"
+  },
+  {
+    "name": "MovableScoreboard",
+    "description": "Makes the Minecraft \" + mname + \" movable.",
+    "iconResource": "IDR_MOVABLE_PNG",
+    "icon": "/mod-icons/movable.png",
+    "settingsCount": 0,
+    "category": "HUD",
+    "source": "MovableScoreboard"
+  },
+  {
+    "name": "MovableTitle",
+    "description": "Makes the Minecraft \" + mname + \" movable.",
+    "iconResource": "IDR_MOVABLE_PNG",
+    "icon": "/mod-icons/movable.png",
+    "settingsCount": 0,
+    "category": "HUD",
+    "source": "MovableTitle"
+  },
+  {
+    "name": "Mumble Link",
+    "description": "Use proximity chat in Flarial with the help of Mumble",
+    "iconResource": "IDR_MUMBLE_PNG",
+    "icon": "/mod-icons/mumble.png",
+    "settingsCount": 1,
+    "category": "HUD",
+    "source": "MumbleLink"
+  },
+  {
+    "name": "Nick",
+    "description": "Hides your username and replace it with something else. Works everywhere (chat, pause, third person, etc) Other people will not be able to see your nick.",
+    "iconResource": "IDR_ICOGNITO_PNG",
+    "icon": "/mod-icons/icognito.png",
+    "settingsCount": 5,
+    "category": "HUD",
+    "source": "Nick"
+  },
+  {
+    "name": "Particle Multiplier",
+    "description": "Particles go brrrrr",
+    "iconResource": "IDR_MULTIPLIER_PNG",
+    "icon": "/mod-icons/multiplier.png",
+    "settingsCount": 0,
+    "category": "HUD",
+    "source": "ParticleMultiplier"
+  },
+  {
+    "name": "Ping Counter",
+    "description": "Displays your current latency to the server.",
+    "iconResource": "IDR_PING_PNG",
+    "icon": "/mod-icons/ping.png",
+    "settingsCount": 32,
+    "category": "HUD",
+    "source": "PingCounter"
+  },
+  {
+    "name": "Pitch Display",
+    "description": "Shows your pitch.",
+    "iconResource": "IDR_SKULL_PNG",
+    "icon": "/mod-icons/skull.png",
+    "settingsCount": 30,
+    "category": "HUD",
+    "source": "PitchDisplay"
+  },
+  {
+    "name": "Pot Counter",
+    "description": "Counts how much potions are in your inventory.",
+    "iconResource": "IDR_POTION_PNG",
+    "icon": "/mod-icons/potion.png",
+    "settingsCount": 29,
+    "category": "HUD",
+    "source": "PotCounter"
+  },
+  {
+    "name": "PotionHUD",
+    "description": "Displays your potion effects",
+    "iconResource": "IDR_POTION_PNG",
+    "icon": "/mod-icons/potion.png",
+    "settingsCount": 15,
+    "category": "HUD",
+    "source": "PotionHUD"
+  },
+  {
+    "name": "Speed Display",
+    "description": "Displays your current travel speed in blocks/second.",
+    "iconResource": "IDR_SPEED_PNG",
+    "icon": "/mod-icons/speed.png",
+    "settingsCount": 29,
+    "category": "HUD",
+    "source": "SpeedDisplay"
+  },
+  {
+    "name": "Tab List",
+    "description": "Java-like tab list. Lists the current online players on the server.",
+    "iconResource": "IDR_LIST_PNG",
+    "icon": "/mod-icons/list.png",
+    "settingsCount": 30,
+    "category": "HUD",
+    "source": "TabList"
+  },
+  {
+    "name": "Text Hotkey",
+    "description": "Send something in chat with a click of a button!",
+    "iconResource": "IDR_TEXT_BOX_PNG",
+    "icon": "/mod-icons/text-box.png",
+    "settingsCount": 0,
+    "category": "HUD",
+    "source": "TextHotkey"
+  },
+  {
+    "name": "Totem Counter",
+    "description": "Counts how many totems you have in your inventory.",
+    "iconResource": "IDR_TOTEM_PNG",
+    "icon": "/mod-icons/totem.png",
+    "settingsCount": 30,
+    "category": "HUD",
+    "source": "TotemCounter"
+  },
+  {
+    "name": "Waila",
+    "description": "Shows what you are looking at.",
+    "iconResource": "IDR_WAILA_PNG",
+    "icon": "/mod-icons/waila.png",
+    "settingsCount": 31,
+    "category": "HUD",
+    "source": "Waila"
+  },
+  {
+    "name": "Chunk Border",
+    "description": "Chunk Border",
+    "iconResource": "IDR_CHUNKBORDER_PNG",
+    "icon": "/mod-icons/chunkborder.png",
+    "settingsCount": 6,
+    "category": "Misc",
+    "source": "ChunkBorder"
+  },
+  {
+    "name": "Deepfry",
+    "description": "Theres only one way to find out.",
+    "iconResource": "IDR_FRYING_PAN_PNG",
+    "icon": "/mod-icons/frying-pan.png",
+    "settingsCount": 1,
+    "category": "Misc",
+    "source": "Deepfry"
+  },
+  {
+    "name": "Item Physics",
+    "description": "Changes rotation behavior of dropped items",
+    "iconResource": "IDR_ITEM_PHYSICS_PNG",
+    "icon": "/mod-icons/item-physics.png",
+    "settingsCount": 0,
+    "category": "Misc",
+    "source": "ItemPhysics"
+  },
+  {
+    "name": "Lewis",
+    "description": "Lewis, king of Hippos. (Brought to you by the one and only, Oblitqrated)",
+    "iconResource": "IDR_SKULL_PNG",
+    "icon": "/mod-icons/skull.png",
+    "settingsCount": 7,
+    "category": "Misc",
+    "source": "Lewis"
+  },
+  {
+    "name": "Low Health",
+    "description": "Warns you when you are at low health.",
+    "iconResource": "IDR_HEART_PNG",
+    "icon": "/mod-icons/heart.png",
+    "settingsCount": 3,
+    "category": "Misc",
+    "source": "LowHealthIndicator"
+  },
+  {
+    "name": "Meds",
+    "description": "Implements the medical 202020 rule into minecraft.",
+    "iconResource": "IDR_TIME_PNG",
+    "icon": "/mod-icons/time.png",
+    "settingsCount": 1,
+    "category": "Misc",
+    "source": "202020"
+  },
+  {
+    "name": "Movable Paperdoll",
+    "description": "Makes the Minecraft paperdoll movable.",
+    "iconResource": "IDR_MAN_PNG",
+    "icon": "/mod-icons/man.png",
+    "settingsCount": 2,
+    "category": "Misc",
+    "source": "PaperDoll"
+  },
+  {
+    "name": "MovableHotbar",
+    "description": "Makes the Minecraft \" + mname + \" movable.",
+    "iconResource": "IDR_MOVABLE_PNG",
+    "icon": "/mod-icons/movable.png",
+    "settingsCount": 0,
+    "category": "Misc",
+    "source": "MovableHotbar"
+  },
+  {
+    "name": "PatarHD",
+    "description": "At this Point it should be called Staff Mod",
+    "iconResource": "IDR_SKULL_PNG",
+    "icon": "/mod-icons/skull.png",
+    "settingsCount": 5,
+    "category": "Misc",
+    "source": "PatarHD"
+  },
+  {
+    "name": "Saturation",
+    "description": "A filter to saturate or desaturate Minecraft.",
+    "iconResource": "IDR_FULLBRIGHT_PNG",
+    "icon": "/mod-icons/fullbright.png",
+    "settingsCount": 1,
+    "category": "Misc",
+    "source": "HueChanger"
+  },
+  {
+    "name": "Skin Stealer",
+    "description": "Equip someone else's skin",
+    "iconResource": "IDR_SKINSTEALER_PNG",
+    "icon": "/mod-icons/SkinStealer.png",
+    "settingsCount": 1,
+    "category": "Misc",
+    "source": "SkinStealer"
+  },
+  {
+    "name": "Stopwatch",
+    "description": "stopwatch",
+    "iconResource": "IDR_TIME_PNG",
+    "icon": "/mod-icons/time.png",
+    "settingsCount": 35,
+    "category": "Misc",
+    "source": "Stopwatch"
+  },
+  {
+    "name": "Subtitles",
+    "description": "Adds Audio Subtitles.",
+    "iconResource": "IDR_CAPTIONS_PNG",
+    "icon": "/mod-icons/captions.png",
+    "settingsCount": 0,
+    "category": "Misc",
+    "source": "Subtitles"
+  },
+  {
+    "name": "Twerk",
+    "description": "yeah baby throw it back",
+    "iconResource": "IDR_TWERK_PNG",
+    "icon": "/mod-icons/twerk.png",
+    "settingsCount": 2,
+    "category": "Misc",
+    "source": "Twerk"
+  },
+  {
+    "name": "Upside Down",
+    "description": "No need to flip your monitor!!",
+    "iconResource": "IDR_UPSIDE_DOWN_PNG",
+    "icon": "/mod-icons/upside-down.png",
+    "settingsCount": 0,
+    "category": "Misc",
+    "source": "UpsideDown"
+  },
+  {
+    "name": "Auto Perspective",
+    "description": "Changes your perspective on specific events.",
+    "iconResource": "IDR_PERSPECTIVE_PNG",
+    "icon": "/mod-icons/perspective.png",
+    "settingsCount": 8,
+    "category": "Movement",
+    "source": "AutoPerspective"
+  },
+  {
+    "name": "Cinematic Camera",
+    "description": "Smooth Cinema-like Camera Movement",
+    "iconResource": "IDR_CINEMATICCAMERA_PNG",
+    "icon": "/mod-icons/cinematiccamera.png",
+    "settingsCount": 6,
+    "category": "Movement",
+    "source": "CinematicCamera"
+  },
+  {
+    "name": "FOV Changer",
+    "description": "Change your FOV beyond Minecraft's limits.",
+    "iconResource": "IDR_FIELD_OF_VIEW_PNG",
+    "icon": "/mod-icons/field-of-view.png",
+    "settingsCount": 2,
+    "category": "Movement",
+    "source": "FOVChanger"
+  },
+  {
+    "name": "FreeLook",
+    "description": "Freely move your camera in 3rd person mode while keeping the player rotation the same.",
+    "iconResource": "IDR_FREELOOK_PNG",
+    "icon": "/mod-icons/freelook.png",
+    "settingsCount": 2,
+    "category": "Movement",
+    "source": "Freelook"
+  },
+  {
+    "name": "Java Dynamic FOV",
+    "description": "Enhances dynamic FOV in bedrock.",
+    "iconResource": "IDR_MAGNIFY_PNG",
+    "icon": "/mod-icons/magnify.png",
+    "settingsCount": 2,
+    "category": "Movement",
+    "source": "JavaDynamicFOV"
+  },
+  {
+    "name": "Java View Bobbing",
+    "description": "Makes the view bobbing exactly like Java Edition.",
+    "iconResource": "IDR_EYE_PNG",
+    "icon": "/mod-icons/eye.png",
+    "settingsCount": 2,
+    "category": "Movement",
+    "source": "JavaViewBobbing"
+  },
+  {
+    "name": "Minimal View Bobbing",
+    "description": "Prevent camera shake when view bobbing is on.",
+    "iconResource": "IDR_EYE_PNG",
+    "icon": "/mod-icons/eye.png",
+    "settingsCount": 0,
+    "category": "Movement",
+    "source": "MinimalViewBobbing"
+  },
+  {
+    "name": "Modern Handling",
+    "description": "Fixes the keybind issue where movement doesn't resume after exiting GUI screens while holding keys.",
+    "iconResource": "IDR_KEYBOARD_PNG",
+    "icon": "/mod-icons/keyboard.png",
+    "settingsCount": 6,
+    "category": "Movement",
+    "source": "ModernKeybindHandling"
+  },
+  {
+    "name": "Mouse Strokes",
+    "description": "Visualizes your camera/mouse movement.",
+    "iconResource": "IDR_CURSOR_PNG",
+    "icon": "/mod-icons/cursor.png",
+    "settingsCount": 18,
+    "category": "Movement",
+    "source": "Mousestrokes"
+  },
+  {
+    "name": "Null Movement",
+    "description": "Only registers the latest movement key.",
+    "iconResource": "IDR_NULL_PNG",
+    "icon": "/mod-icons/null.png",
+    "settingsCount": 2,
+    "category": "Movement",
+    "source": "NullMovement"
+  },
+  {
+    "name": "Raw Input Buffer",
+    "description": "Fixes Minecraft's default input delay",
+    "iconResource": "IDR_CURSOR_PNG",
+    "icon": "/mod-icons/cursor.png",
+    "settingsCount": 0,
+    "category": "Movement",
+    "source": "RawInputBuffer"
+  },
+  {
+    "name": "Sens Multiplier",
+    "description": "Multiplies mouse sensitivity",
+    "iconResource": "IDR_MULTIPLIER_PNG",
+    "icon": "/mod-icons/multiplier.png",
+    "settingsCount": 4,
+    "category": "Movement",
+    "source": "SensMultiplier"
+  },
+  {
+    "name": "SnapLook",
+    "description": "Quickly look behind you.",
+    "iconResource": "IDR_EYE_PNG",
+    "icon": "/mod-icons/eye.png",
+    "settingsCount": 2,
+    "category": "Movement",
+    "source": "SnapLook"
+  },
+  {
+    "name": "Toggle Sneak",
+    "description": "No need to hold down your sneak key.",
+    "iconResource": "IDR_SLOWLY_PNG",
+    "icon": "/mod-icons/slowly.png",
+    "settingsCount": 3,
+    "category": "Movement",
+    "source": "Sneak"
+  },
+  {
+    "name": "Toggle Sprint",
+    "description": "Automatically sprints for you!!!",
+    "iconResource": "IDR_AUTO_SPRINT_PNG",
+    "icon": "/mod-icons/auto_sprint.png",
+    "settingsCount": 32,
+    "category": "Movement",
+    "source": "Sprint"
+  },
+  {
+    "name": "Zoom",
+    "description": "Allows you to see distant places.",
+    "iconResource": "IDR_MAGNIFY_PNG",
+    "icon": "/mod-icons/magnify.png",
+    "settingsCount": 17,
+    "category": "Movement",
+    "source": "Zoom"
+  },
+  {
+    "name": "Animations",
+    "description": "Animate your selected slot square while you switch slots.",
+    "iconResource": "IDR_ANIMATIONS_PNG",
+    "icon": "/mod-icons/Animations.png",
+    "settingsCount": 1,
+    "category": "Render",
+    "source": "Animations"
+  },
+  {
+    "name": "Block Outline",
+    "description": "Changes the block outline color",
+    "iconResource": "IDR_BLOCK_PNG",
+    "icon": "/mod-icons/block.png",
+    "settingsCount": 7,
+    "category": "Render",
+    "source": "BlockOutline"
+  },
+  {
+    "name": "Custom Crosshair",
+    "description": "Allows for dynamic crosshair colors.",
+    "iconResource": "IDR_CROSSHAIR_PNG",
+    "icon": "/mod-icons/crosshair.png",
+    "settingsCount": 0,
+    "category": "Render",
+    "source": "CustomCrosshair"
+  },
+  {
+    "name": "Depth Of Field",
+    "description": "No description provided in module constructor.",
+    "iconResource": "IDR_DOF_PNG",
+    "icon": "/mod-icons/dof.png",
+    "settingsCount": 6,
+    "category": "Render",
+    "source": "DepthOfField"
+  },
+  {
+    "name": "Dynamic Lighting",
+    "description": "Held items and entities emit light dynamically. \" \"Torches, lanterns, and burning mobs illuminate nearby blocks in real-time.",
+    "iconResource": "IDR_FULLBRIGHT_PNG",
+    "icon": "/mod-icons/fullbright.png",
+    "settingsCount": 0,
+    "category": "Render",
+    "source": "DynamicLighting"
+  },
+  {
+    "name": "Fire Height",
+    "description": "Make the fire overlay less obtrusive!",
+    "iconResource": "IDR_EYE_PNG",
+    "icon": "/mod-icons/eye.png",
+    "settingsCount": 0,
+    "category": "Render",
+    "source": "FireHeight"
+  },
+  {
+    "name": "Fog Color",
+    "description": "Changes the color of the Minecraft fog.",
+    "iconResource": "IDR_SMOKE_PNG",
+    "icon": "/mod-icons/smoke.png",
+    "settingsCount": 1,
+    "category": "Render",
+    "source": "FogColor"
+  },
+  {
+    "name": "Fullbright",
+    "description": "No need for torches! Provides consistent and constant illumination. Effectively removing darkness and shadows.",
+    "iconResource": "IDR_FULLBRIGHT_PNG",
+    "icon": "/mod-icons/fullbright.png",
+    "settingsCount": 1,
+    "category": "Render",
+    "source": "Fullbright"
+  },
+  {
+    "name": "Glint Color",
+    "description": "Change the glint color of enchanted items.",
+    "iconResource": "IDR_SWORD_PNG",
+    "icon": "/mod-icons/sword.png",
+    "settingsCount": 0,
+    "category": "Render",
+    "source": "GlintColor"
+  },
+  {
+    "name": "MC GUI Scale",
+    "description": "Change your GUI Scale beyond Minecraft's restrictions.",
+    "iconResource": "IDR_SCALE_PNG",
+    "icon": "/mod-icons/scale.png",
+    "settingsCount": 1,
+    "category": "Render",
+    "source": "GuiScale"
+  },
+  {
+    "name": "Motion Blur",
+    "description": "Make fast movements appear smoother and more realistic by blurring the image slightly in the direction of motion.",
+    "iconResource": "IDR_BLUR_PNG",
+    "icon": "/mod-icons/blur.png",
+    "settingsCount": 12,
+    "category": "Render",
+    "source": "MotionBlur"
+  },
+  {
+    "name": "Nametag",
+    "description": "Shows your nametag for you while in 3rd person mode.",
+    "iconResource": "IDR_NAMETAG_PNG",
+    "icon": "/mod-icons/nametag.png",
+    "settingsCount": 2,
+    "category": "Render",
+    "source": "NametagModifier"
+  },
+  {
+    "name": "Render Option",
+    "description": "Change the way how the game is rendered.",
+    "iconResource": "IDR_RENDEROPTIONS_PNG",
+    "icon": "/mod-icons/renderoptions.png",
+    "settingsCount": 9,
+    "category": "Render",
+    "source": "RenderOptions"
+  },
+  {
+    "name": "Shader Loader",
+    "description": "Load Shaders from ResourcePack",
+    "iconResource": "IDR_RENDER_DRAGON_PNG",
+    "icon": "/mod-icons/renderdragon.png",
+    "settingsCount": 0,
+    "category": "Render",
+    "source": "MaterialBinLoader"
+  },
+  {
+    "name": "Time Changer",
+    "description": "Changes the ingame time.",
+    "iconResource": "IDR_TIME_PNG",
+    "icon": "/mod-icons/time.png",
+    "settingsCount": 1,
+    "category": "Render",
+    "source": "TimeChanger"
+  },
+  {
+    "name": "View Model",
+    "description": "Allows you to modify how item in hand looks.",
+    "iconResource": "IDR_EYE_PNG",
+    "icon": "/mod-icons/eye.png",
+    "settingsCount": 12,
+    "category": "Render",
+    "source": "ViewModel"
+  },
+  {
+    "name": "Weather Changer",
+    "description": "Changes the weather ingame.",
+    "iconResource": "IDR_CLOUDY_PNG",
+    "icon": "/mod-icons/cloudy.png",
+    "settingsCount": 5,
+    "category": "Render",
+    "source": "WeatherChanger"
+  },
+  {
+    "name": "Auto GG",
+    "description": "Automatically sends a message when you win a game. Workes on The Hive, Zeqa, CubeCraft, Lifeboat, Galaxite and Mineville.",
+    "iconResource": "IDR_LIKE_PNG",
+    "icon": "/mod-icons/like.png",
+    "settingsCount": 1,
+    "category": "Utility",
+    "source": "AutoGG"
+  },
+  {
+    "name": "ClickGUI",
+    "description": "No description provided in module constructor.",
+    "iconResource": "",
+    "icon": "/mod-icons/nametag.png",
+    "settingsCount": 42,
+    "category": "Utility",
+    "source": "ClickGUI"
+  },
+  {
+    "name": "Command Hotkey",
+    "description": "Send command with a click of a button!",
+    "iconResource": "IDR_TEXT_BOX_PNG",
+    "icon": "/mod-icons/text-box.png",
+    "settingsCount": 1,
+    "category": "Utility",
+    "source": "CommandHotkey"
+  },
+  {
+    "name": "Disable Mouse Wheel",
+    "description": "Prevents you from accidentally scrolling through your hotbar",
+    "iconResource": "IDR_CURSOR_PNG",
+    "icon": "/mod-icons/cursor.png",
+    "settingsCount": 0,
+    "category": "Utility",
+    "source": "DisableMouseWheel"
+  },
+  {
+    "name": "Hive Utils",
+    "description": "Handy utilities for The Hive partnered server",
+    "iconResource": "IDR_HIVE_PNG",
+    "icon": "/mod-icons/hive.png",
+    "settingsCount": 31,
+    "category": "Utility",
+    "source": "HiveUtils"
+  },
+  {
+    "name": "Inventory Lock",
+    "description": "Locks Items from being dropped",
+    "iconResource": "IDR_INVENTORYLOCK_PNG",
+    "icon": "/mod-icons/InventoryLock.png",
+    "settingsCount": 0,
+    "category": "Utility",
+    "source": "InventoryLock"
+  },
+  {
+    "name": "Inventory Offhand Hotkey",
+    "description": "Swaps the hovered inventory item with offhand while an inventory or container screen is open.",
+    "iconResource": "IDR_TOTEM_PNG",
+    "icon": "/mod-icons/totem.png",
+    "settingsCount": 0,
+    "category": "Utility",
+    "source": "InventoryOffhandHotkey"
+  },
+  {
+    "name": "Item Tracker",
+    "description": "Shows Picked/Dropped Items.",
+    "iconResource": "IDR_ITEMTRACKER_PNG",
+    "icon": "/mod-icons/ItemTracker.png",
+    "settingsCount": 39,
+    "category": "Utility",
+    "source": "ItemTracker"
+  },
+  {
+    "name": "Player Notifier",
+    "description": "Notifies you when a player is in the server.",
+    "iconResource": "IDR_NOTIFICATION_PNG",
+    "icon": "/mod-icons/notification.png",
+    "settingsCount": 2,
+    "category": "Utility",
+    "source": "PlayerNotifier"
+  },
+  {
+    "name": "TNT Timer",
+    "description": "Shows a countdown until TNT explodes",
+    "iconResource": "IDR_TIME_PNG",
+    "icon": "/mod-icons/time.png",
+    "settingsCount": 8,
+    "category": "Utility",
+    "source": "TNTTimer"
+  },
+  {
+    "name": "Waypoints",
+    "description": "Allows you to mark points in your world.",
+    "iconResource": "IDR_WAYPOINTS_PNG",
+    "icon": "/mod-icons/waypoints.png",
+    "settingsCount": 22,
+    "category": "Utility",
+    "source": "Waypoints"
+  },
+  {
+    "name": "Zeqa Utils",
+    "description": "Handy utilities for Zeqa",
+    "iconResource": "IDR_ZEQA_PNG",
+    "icon": "/mod-icons/zeqa.png",
+    "settingsCount": 7,
+    "category": "Utility",
+    "source": "ZeqaUtils"
+  }
+] as const satisfies readonly DllCssModuleDetail[];
diff --git a/app/docs/docs-data.tsx b/app/docs/docs-data.tsx
new file mode 100644
index 0000000..ba1bf89
--- /dev/null
+++ b/app/docs/docs-data.tsx
@@ -0,0 +1,83 @@
+import Link from "next/link";
+import { RememberDocsArticle } from "./DocsMemory";
+import { DocsToc } from "./DocsToc";
+import { docsArticles } from "./articles";
+import type { DocsArticle } from "./docs-types";
+
+export { docsArticles };
+
+export function getDocsArticle(slug: string) {
+  return docsArticles.find((article) => article.slug === slug);
+}
+
+export function DocsArticlePage({
+  article,
+  rememberArticle = true,
+}: {
+  article: DocsArticle;
+  rememberArticle?: boolean;
+}) {
+  const Icon = article.icon;
+  const guideNumber = docsArticles.findIndex((item) => item.slug === article.slug) + 1;
+
+  return (
+    <div className="mx-auto w-full max-w-[1400px] min-w-0 px-4 py-10 sm:px-6 sm:py-14">
+      <div className="grid min-w-0 gap-6 lg:grid-cols-[260px_minmax(0,820px)] xl:grid-cols-[260px_minmax(0,820px)_240px] xl:justify-center">
+        {rememberArticle ? <RememberDocsArticle slug={article.slug} /> : null}
+        <aside className="lg:sticky lg:top-24 lg:self-start">
+        <div className="rounded-[var(--radius-2xl)] p-3 lg:max-h-[calc(100vh-7rem)] lg:overflow-y-auto lg:overscroll-contain" style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
+          <div className="px-2 pb-2 font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--color-text-mute)]">
+            Articles
+          </div>
+          <nav className="grid gap-1">
+            {docsArticles.map((item) => {
+              const ItemIcon = item.icon;
+              const active = item.slug === article.slug;
+              return (
+                <Link
+                  key={item.slug}
+                  href={`/docs/${item.slug}/`}
+                  className={[
+                    "group rounded-[var(--radius-md)] px-3 py-3 transition-colors",
+                    active ? "bg-[var(--color-bg-subtle)] text-white" : "hover:bg-[var(--color-bg-subtle)]",
+                  ].join(" ")}
+                >
+                  <span className="flex min-w-0 items-center gap-2 font-display text-[14px] font-semibold leading-snug text-white">
+                    <ItemIcon size={15} className="shrink-0 text-[var(--color-accent)]" />
+                    <span className="min-w-0 break-words">{item.title}</span>
+                  </span>
+                  <span className="mt-1 block text-[12px] leading-snug text-[var(--color-text-mute)] [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:2] overflow-hidden">
+                    {item.summary}
+                  </span>
+                </Link>
+              );
+            })}
+          </nav>
+        </div>
+      </aside>
+
+        <main className="min-w-0">
+          <article id="docs-article-content">
+            <div className="flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.22em] text-[var(--color-accent)]">
+              <Icon size={14} />
+              Guide {String(guideNumber).padStart(2, "0")}
+            </div>
+            <h1 className="mt-2 font-display text-[34px] font-semibold leading-[1] tracking-[-0.03em] text-white sm:text-[52px]">
+              {article.title}
+            </h1>
+            <p className="mt-4 max-w-2xl text-[15px] leading-relaxed text-[var(--color-text-mute)]">
+              {article.summary}
+            </p>
+            <div className="mt-7 min-w-0 space-y-7 text-[14px] leading-relaxed text-[var(--color-text-mute)] sm:text-[15px]">
+              {article.render()}
+            </div>
+          </article>
+        </main>
+
+        <aside className="hidden xl:block xl:sticky xl:top-24 xl:self-start">
+          <DocsToc />
+        </aside>
+      </div>
+    </div>
+  );
+}
diff --git a/app/docs/docs-types.ts b/app/docs/docs-types.ts
new file mode 100644
index 0000000..2d1f256
--- /dev/null
+++ b/app/docs/docs-types.ts
@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { BookOpen } from "lucide-react";
+
+export type TocItem = {
+  title: string;
+  href: string;
+};
+
+export type DocsArticle = {
+  slug: string;
+  title: string;
+  summary: string;
+  icon: typeof BookOpen;
+  toc: TocItem[];
+  render: () => ReactNode;
+};
diff --git a/app/docs/page.tsx b/app/docs/page.tsx
index c3c5b5d..6f3f8cd 100644
--- a/app/docs/page.tsx
+++ b/app/docs/page.tsx
@@ -1,363 +1,23 @@
 import type { Metadata } from "next";
-import type { ReactNode } from "react";
-import { BookOpen, FileCode2, ListChecks, ShieldCheck } from "lucide-react";
+import { DocsArticlePage, docsArticles } from "./docs-data";
+import { OpenLastDocsArticle } from "./DocsMemory";
 
 export const metadata: Metadata = {
   title: "Docs",
-  description: "Flarial developer and integration documentation.",
+  description: "Flarial documentation, setup guides, compatibility notes, modules, and server integration docs.",
   alternates: { canonical: "/docs" },
   openGraph: {
     title: "Flarial Docs",
-    description: "Developer and integration documentation for Flarial.",
+    description: "Documentation for Flarial setup, modules, features, and server integrations.",
     type: "article",
   },
 };
 
-const restrictThreePayload = `{
-  "server_name": "Example Server",
-  "notification_message": "This feature is disabled on this server.",
-  "flarial_client_modules": {
-    "module.freelook.name": {
-      "block": true,
-      "restriction_reason": "Freelook is disabled on this server."
-    },
-    "module.full_bright.name": {
-      "block": true,
-      "restriction_reason": "Fullbright is disabled on this server."
-    },
-    "module.crystal_optimizer.name": {
-      "block": true,
-      "restriction_reason": "Crystal Optimizer is disabled on this server."
-    }
-  }
-}`;
-
-const restrictOnePayload = `{
-  "server_name": "Example Server",
-  "notification_message": "Disabled by this server.",
-  "flarial_client_modules": {
-    "module.zoom.name": { "block": true }
-  }
-}`;
-
-const clearPayload = `{
-  "server_name": "Example Server",
-  "flarial_client_modules": {}
-}`;
-
-const blockableModules = [
-  {"name": "Motion Blur", "token": "module.motion_blur.name", "aliases": ["motion_blur", "module.motion_blur.name", "motionblur"]},
-  {"name": "Deepfry", "token": "module.deepfry.name", "aliases": ["deepfry", "module.deepfry.name"]},
-  {"name": "Saturation", "token": "module.saturation.name", "aliases": ["saturation", "module.saturation.name"]},
-  {"name": "PatarHD", "token": "module.patarhd.name", "aliases": ["patarhd", "module.patarhd.name"]},
-  {"name": "DVD Screen", "token": "module.dvd_screen.name", "aliases": ["dvd_screen", "module.dvd_screen.name", "dvdscreen"]},
-  {"name": "FOV Changer", "token": "module.fov_changer.name", "aliases": ["fov_changer", "module.fov_changer.name", "fovchanger"]},
-  {"name": "Zoom", "token": "module.zoom.name", "aliases": ["zoom", "module.zoom.name"]},
-  {"name": "Upside Down", "token": "module.upside_down.name", "aliases": ["upside_down", "module.upside_down.name", "upsidedown"]},
-  {"name": "ClickGUI", "token": "module.clickgui.name", "aliases": ["clickgui", "module.clickgui.name"]},
-  {"name": "Meds", "token": "module.meds.name", "aliases": ["meds", "module.meds.name"]},
-  {"name": "FPS", "token": "module.fps.name", "aliases": ["fps", "module.fps.name"]},
-  {"name": "CPS", "token": "module.cps.name", "aliases": ["cps", "module.cps.name"]},
-  {"name": "IP Display", "token": "module.ip_display.name", "aliases": ["ip_display", "module.ip_display.name", "ipdisplay"]},
-  {"name": "Reach Counter", "token": "module.reach_counter.name", "aliases": ["reach_counter", "module.reach_counter.name", "reachcounter"]},
-  {"name": "Combo", "token": "module.combo.name", "aliases": ["combo", "module.combo.name"]},
-  {"name": "Ping Counter", "token": "module.ping_counter.name", "aliases": ["ping_counter", "module.ping_counter.name", "pingcounter"]},
-  {"name": "Pot Counter", "token": "module.pot_counter.name", "aliases": ["pot_counter", "module.pot_counter.name", "potcounter"]},
-  {"name": "Arrow Counter", "token": "module.arrow_counter.name", "aliases": ["arrow_counter", "module.arrow_counter.name", "arrowcounter"]},
-  {"name": "Item Tracker", "token": "module.item_tracker.name", "aliases": ["item_tracker", "module.item_tracker.name", "itemtracker"]},
-  {"name": "Entity Counter", "token": "module.entity_counter.name", "aliases": ["entity_counter", "module.entity_counter.name", "entitycounter"]},
-  {"name": "Clock", "token": "module.clock.name", "aliases": ["clock", "module.clock.name"]},
-  {"name": "Memory", "token": "module.memory.name", "aliases": ["memory", "module.memory.name"]},
-  {"name": "Fullbright", "token": "module.fullbright.name", "aliases": ["fullbright", "module.fullbright.name", "full_bright"]},
-  {"name": "Keystrokes", "token": "module.keystrokes.name", "aliases": ["keystrokes", "module.keystrokes.name"]},
-  {"name": "Toggle Sneak", "token": "module.toggle_sneak.name", "aliases": ["toggle_sneak", "module.toggle_sneak.name", "togglesneak"]},
-  {"name": "Toggle Sprint", "token": "module.toggle_sprint.name", "aliases": ["toggle_sprint", "module.toggle_sprint.name", "togglesprint"]},
-  {"name": "Hitbox", "token": "module.hitbox.name", "aliases": ["hitbox", "module.hitbox.name", "hitboxes"]},
-  {"name": "Hurt Color", "token": "module.hurt_color.name", "aliases": ["hurt_color", "module.hurt_color.name", "hurtcolor"]},
-  {"name": "Block Hit", "token": "module.block_hit.name", "aliases": ["block_hit", "module.block_hit.name", "blockhit"]},
-  {"name": "Fire Height", "token": "module.fire_height.name", "aliases": ["fire_height", "module.fire_height.name", "fireheight"]},
-  {"name": "Better Inventory", "token": "module.better_inventory.name", "aliases": ["better_inventory", "module.better_inventory.name", "betterinventory"]},
-  {"name": "Dynamic Lighting", "token": "module.dynamic_lighting.name", "aliases": ["dynamic_lighting", "module.dynamic_lighting.name", "dynamiclighting"]},
-  {"name": "Nametag", "token": "module.nametag.name", "aliases": ["nametag", "module.nametag.name"]},
-  {"name": "Java Dynamic FOV", "token": "module.java_dynamic_fov.name", "aliases": ["java_dynamic_fov", "module.java_dynamic_fov.name", "javadynamicfov"]},
-  {"name": "SnapLook", "token": "module.snaplook.name", "aliases": ["snaplook", "module.snaplook.name"]},
-  {"name": "Fog Color", "token": "module.fog_color.name", "aliases": ["fog_color", "module.fog_color.name", "fogcolor"]},
-  {"name": "ArmorHUD", "token": "module.armorhud.name", "aliases": ["armorhud", "module.armorhud.name"]},
-  {"name": "Time Changer", "token": "module.time_changer.name", "aliases": ["time_changer", "module.time_changer.name", "timechanger"]},
-  {"name": "Movable Paperdoll", "token": "module.movable_paperdoll.name", "aliases": ["movable_paperdoll", "module.movable_paperdoll.name", "movablepaperdoll"]},
-  {"name": "MC GUI Scale", "token": "module.mc_gui_scale.name", "aliases": ["mc_gui_scale", "module.mc_gui_scale.name", "mcguiscale"]},
-  {"name": "Render Option", "token": "module.render_option.name", "aliases": ["render_option", "module.render_option.name", "renderoption"]},
-  {"name": "Glint Color", "token": "module.glint_color.name", "aliases": ["glint_color", "module.glint_color.name", "glintcolor"]},
-  {"name": "Item Physics", "token": "module.item_physics.name", "aliases": ["item_physics", "module.item_physics.name", "itemphysics"]},
-  {"name": "Tab List", "token": "module.tab_list.name", "aliases": ["tab_list", "module.tab_list.name", "tablist"]},
-  {"name": "Weather Changer", "token": "module.weather_changer.name", "aliases": ["weather_changer", "module.weather_changer.name", "weatherchanger"]},
-  {"name": "Nick", "token": "module.nick.name", "aliases": ["nick", "module.nick.name"]},
-  {"name": "FreeLook", "token": "module.freelook.name", "aliases": ["freelook", "module.freelook.name", "free_look"]},
-  {"name": "Auto Perspective", "token": "module.auto_perspective.name", "aliases": ["auto_perspective", "module.auto_perspective.name", "autoperspective"]},
-  {"name": "Auto GG", "token": "module.auto_gg.name", "aliases": ["auto_gg", "module.auto_gg.name", "autogg"]},
-  {"name": "Text Hotkey", "token": "module.text_hotkey.name", "aliases": ["text_hotkey", "module.text_hotkey.name", "texthotkey"]},
-  {"name": "Speed Display", "token": "module.speed_display.name", "aliases": ["speed_display", "module.speed_display.name", "speeddisplay"]},
-  {"name": "CPS Limiter", "token": "module.cps_limiter.name", "aliases": ["cps_limiter", "module.cps_limiter.name", "cpslimiter"]},
-  {"name": "Break Progress", "token": "module.break_progress.name", "aliases": ["break_progress", "module.break_progress.name", "breakprogress"]},
-  {"name": "Animations", "token": "module.animations.name", "aliases": ["animations", "module.animations.name"]},
-  {"name": "Block Outline", "token": "module.block_outline.name", "aliases": ["block_outline", "module.block_outline.name", "blockoutline"]},
-  {"name": "Command Hotkey", "token": "module.command_hotkey.name", "aliases": ["command_hotkey", "module.command_hotkey.name", "commandhotkey"]},
-  {"name": "No Hurt Cam", "token": "module.no_hurt_cam.name", "aliases": ["no_hurt_cam", "module.no_hurt_cam.name", "nohurtcam"]},
-  {"name": "Inventory HUD", "token": "module.inventory_hud.name", "aliases": ["inventory_hud", "module.inventory_hud.name", "inventoryhud"]},
-  {"name": "Hive Utils", "token": "module.hive_utils.name", "aliases": ["hive_utils", "module.hive_utils.name", "hiveutils"]},
-  {"name": "Hit Ping", "token": "module.hit_ping.name", "aliases": ["hit_ping", "module.hit_ping.name", "hitping"]},
-  {"name": "Opponent Reach", "token": "module.opponent_reach.name", "aliases": ["opponent_reach", "module.opponent_reach.name", "opponentreach"]},
-  {"name": "View Model", "token": "module.view_model.name", "aliases": ["view_model", "module.view_model.name", "viewmodel"]},
-  {"name": "Faster Inventory", "token": "module.faster_inventory.name", "aliases": ["faster_inventory", "module.faster_inventory.name", "fasterinventory"]},
-  {"name": "PotionHUD", "token": "module.potionhud.name", "aliases": ["potionhud", "module.potionhud.name"]},
-  {"name": "Movable Scoreboard", "token": "module.movable_scoreboard.name", "aliases": ["movable_scoreboard", "module.movable_scoreboard.name", "movablescoreboard"]},
-  {"name": "Movable Title", "token": "module.movable_title.name", "aliases": ["movable_title", "module.movable_title.name", "movabletitle"]},
-  {"name": "Movable Bossbar", "token": "module.movable_bossbar.name", "aliases": ["movable_bossbar", "module.movable_bossbar.name", "movablebossbar"]},
-  {"name": "Movable Chat", "token": "module.movable_chat.name", "aliases": ["movable_chat", "module.movable_chat.name", "movablechat"]},
-  {"name": "Clear Scoreboard", "token": "module.clear_scoreboard.name", "aliases": ["clear_scoreboard", "module.clear_scoreboard.name", "clearscoreboard"]},
-  {"name": "Clear Chat", "token": "module.clear_chat.name", "aliases": ["clear_chat", "module.clear_chat.name", "clearchat"]},
-  {"name": "Movable Coordinates", "token": "module.movable_coordinates.name", "aliases": ["movable_coordinates", "module.movable_coordinates.name", "movablecoordinates"]},
-  {"name": "Movable Hotbar", "token": "module.movable_hotbar.name", "aliases": ["movable_hotbar", "module.movable_hotbar.name", "movablehotbar"]},
-  {"name": "Movable Day Counter", "token": "module.movable_day_counter.name", "aliases": ["movable_day_counter", "module.movable_day_counter.name", "movabledaycounter"]},
-  {"name": "Mouse Strokes", "token": "module.mouse_strokes.name", "aliases": ["mouse_strokes", "module.mouse_strokes.name", "mousestrokes"]},
-  {"name": "Java Hotkeys Fix", "token": "module.java_hotkeys_fix.name", "aliases": ["java_hotkeys_fix", "module.java_hotkeys_fix.name", "javahotkeysfix", "java_hotkeys", "module.java_hotkeys.name"]},
-  {"name": "Inventory Offhand Hotkey", "token": "module.inventory_offhand_hotkey.name", "aliases": ["inventory_offhand_hotkey", "module.inventory_offhand_hotkey.name", "inventoryoffhandhotkey"]},
-  {"name": "Hive Statistics", "token": "module.hive_statistics.name", "aliases": ["hive_statistics", "module.hive_statistics.name", "hivestatistics"]},
-  {"name": "Waypoints", "token": "module.waypoints.name", "aliases": ["waypoints", "module.waypoints.name"]},
-  {"name": "Null Movement", "token": "module.null_movement.name", "aliases": ["null_movement", "module.null_movement.name", "nullmovement"]},
-  {"name": "Modern Handling", "token": "module.modern_handling.name", "aliases": ["modern_handling", "module.modern_handling.name", "modernhandling"]},
-  {"name": "Custom Crosshair", "token": "module.custom_crosshair.name", "aliases": ["custom_crosshair", "module.custom_crosshair.name", "customcrosshair"]},
-  {"name": "Waila", "token": "module.waila.name", "aliases": ["waila", "module.waila.name"]},
-  {"name": "Skin Stealer", "token": "module.skin_stealer.name", "aliases": ["skin_stealer", "module.skin_stealer.name", "skinstealer"]},
-  {"name": "Raw Input Buffer", "token": "module.raw_input_buffer.name", "aliases": ["raw_input_buffer", "module.raw_input_buffer.name", "rawinputbuffer"]},
-  {"name": "Low Health", "token": "module.low_health.name", "aliases": ["low_health", "module.low_health.name", "lowhealth"]},
-  {"name": "Player Notifier", "token": "module.player_notifier.name", "aliases": ["player_notifier", "module.player_notifier.name", "playernotifier"]},
-  {"name": "Zeqa Utils", "token": "module.zeqa_utils.name", "aliases": ["zeqa_utils", "module.zeqa_utils.name", "zeqautils"]},
-  {"name": "Mumble Link", "token": "module.mumble_link.name", "aliases": ["mumble_link", "module.mumble_link.name", "mumblelink"]},
-  {"name": "Shader Loader", "token": "module.shader_loader.name", "aliases": ["shader_loader", "module.shader_loader.name", "shaderloader"]},
-  {"name": "Minimal View Bobbing", "token": "module.minimal_view_bobbing.name", "aliases": ["minimal_view_bobbing", "module.minimal_view_bobbing.name", "minimalviewbobbing"]},
-  {"name": "Lewis", "token": "module.lewis.name", "aliases": ["lewis", "module.lewis.name"]},
-  {"name": "Coordinates", "token": "module.coordinates.name", "aliases": ["coordinates", "module.coordinates.name"]},
-  {"name": "Experience Info", "token": "module.experience_info.name", "aliases": ["experience_info", "module.experience_info.name", "experienceinfo"]},
-  {"name": "Disable Mouse Wheel", "token": "module.disable_mouse_wheel.name", "aliases": ["disable_mouse_wheel", "module.disable_mouse_wheel.name", "disablemousewheel"]},
-  {"name": "Java Debug Menu", "token": "module.java_debug_menu.name", "aliases": ["java_debug_menu", "module.java_debug_menu.name", "javadebugmenu"]},
-  {"name": "DirectionHUD", "token": "module.directionhud.name", "aliases": ["directionhud", "module.directionhud.name"]},
-  {"name": "Locator Bar", "token": "module.locator_bar.name", "aliases": ["locator_bar", "module.locator_bar.name", "locatorbar"]},
-  {"name": "Java View Bobbing", "token": "module.java_view_bobbing.name", "aliases": ["java_view_bobbing", "module.java_view_bobbing.name", "javaviewbobbing"]},
-  {"name": "Death Logger", "token": "module.death_logger.name", "aliases": ["death_logger", "module.death_logger.name", "deathlogger"]},
-  {"name": "Twerk", "token": "module.twerk.name", "aliases": ["twerk", "module.twerk.name"]},
-  {"name": "Cinematic Camera", "token": "module.cinematic_camera.name", "aliases": ["cinematic_camera", "module.cinematic_camera.name", "cinematiccamera"]},
-  {"name": "Chunk Border", "token": "module.chunk_border.name", "aliases": ["chunk_border", "module.chunk_border.name", "chunkborder"]},
-  {"name": "Compact Chat", "token": "module.compact_chat.name", "aliases": ["compact_chat", "module.compact_chat.name", "compactchat"]},
-  {"name": "Message Logger", "token": "module.message_logger.name", "aliases": ["message_logger", "module.message_logger.name", "messagelogger"]},
-  {"name": "Totem Counter", "token": "module.totem_counter.name", "aliases": ["totem_counter", "module.totem_counter.name", "totemcounter"]},
-  {"name": "Item Counter", "token": "module.item_counter.name", "aliases": ["item_counter", "module.item_counter.name", "itemcounter"]},
-  {"name": "Delux Overlay", "token": "module.delux_overlay.name", "aliases": ["delux_overlay", "module.delux_overlay.name", "deluxoverlay"]},
-  {"name": "Better Hunger Bar", "token": "module.better_hunger_bar.name", "aliases": ["better_hunger_bar", "module.better_hunger_bar.name", "betterhungerbar"]},
-  {"name": "Particle Multiplier", "token": "module.particle_multiplier.name", "aliases": ["particle_multiplier", "module.particle_multiplier.name", "particlemultiplier"]},
-  {"name": "Bow Sensitivity", "token": "module.bow_sensitivity.name", "aliases": ["bow_sensitivity", "module.bow_sensitivity.name", "bowsensitivity"]},
-  {"name": "Subtitles", "token": "module.subtitles.name", "aliases": ["subtitles", "module.subtitles.name"]},
-  {"name": "Sens Multiplier", "token": "module.sens_multiplier.name", "aliases": ["sens_multiplier", "module.sens_multiplier.name", "sensmultiplier"]},
-  {"name": "Stopwatch", "token": "module.stopwatch.name", "aliases": ["stopwatch", "module.stopwatch.name"]},
-  {"name": "Depth Of Field", "token": "module.depth_of_field.name", "aliases": ["depth_of_field", "module.depth_of_field.name", "depthoffield"]},
-  {"name": "Crystal Optimizer", "token": "module.crystal_optimizer.name", "aliases": ["crystal_optimizer", "module.crystal_optimizer.name", "crystaloptimizer"]},
-  {"name": "TNT Timer", "token": "module.tnt_timer.name", "aliases": ["tnt_timer", "module.tnt_timer.name", "tnttimer"]},
-  {"name": "Inventory Lock", "token": "module.inventory_lock.name", "aliases": ["inventory_lock", "module.inventory_lock.name", "inventorylock"]},
-  {"name": "Audio Controller", "token": "module.audio_controller.name", "aliases": ["audio_controller", "module.audio_controller.name", "audiocontroller"]},
-  {"name": "Pitch Display", "token": "module.pitch_display.name", "aliases": ["pitch_display", "module.pitch_display.name", "pitchdisplay"]},
-  {"name": "Durability Warning", "token": "module.durability_warning.name", "aliases": ["durability_warning", "module.durability_warning.name", "durabilitywarning"]},
-  {"name": "Camera Test", "token": "module.camera_test.name", "aliases": ["camera_test", "module.camera_test.name", "cameratest"]},
-  {"name": "Notebot", "token": "module.notebot.name", "aliases": ["notebot", "module.notebot.name"]},
-  {"name": "Minimap", "token": "module.minimap.name", "aliases": ["minimap", "module.minimap.name"]},
-  {"name": "Doom", "token": "module.doom.name", "aliases": ["doom", "module.doom.name"]},
-  {"name": "Discord RPC", "token": "module.discord_rpc.name", "aliases": ["discord_rpc", "module.discord_rpc.name", "discordrpc"]},
-] as const;
-
-
-const flow = [
-  "PacketHooks hooks inbound ScriptMessagePacket receive callbacks.",
-  "The packet is wrapped in PacketEvent and dispatched through eventMgr.",
-  "ServerModuleControlListener accepts only the flarial_client_event:restrict_features header.",
-  "The JSON payload resolves module names through display names, aliases, and manual aliases.",
-  "Matching modules receive Module::applyServerRestriction and are disabled by ModuleManager::syncState.",
-  "Restrictions are cleared on Disconnect, Transfer, StartGame, or by sending an empty restriction set.",
-];
-
-const serverImplementationNotes = [
-  "Send the packet with the exact message id: flarial_client_event:restrict_features.",
-  "Keep payloads small; avoid resending the same policy every tick.",
-  "Send valid JSON only. If you generate payloads dynamically, validate them before sending.",
-  "Use documented module keys/aliases instead of copying UI labels from the client.",
-  "Re-send or clear restrictions when players switch servers, worlds, or sessions.",
-  "To clear all restrictions, send an empty module list/object for the same header.",
-];
-
-function CodeBlock({ children }: { children: string }) {
-  return (
-    <pre className="overflow-x-auto rounded-[var(--radius-xl)] border border-white/[0.06] bg-black/35 p-4 text-[12px] leading-relaxed text-[var(--color-text)] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
-      <code>{children}</code>
-    </pre>
-  );
-}
-
-function Section({
-  id,
-  eyebrow,
-  title,
-  children,
-}: {
-  id: string;
-  eyebrow: string;
-  title: string;
-  children: ReactNode;
-}) {
-  return (
-    <section id={id} className="scroll-mt-28 min-w-0 rounded-[var(--radius-2xl)] p-5 sm:p-7" style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
-      <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-[var(--color-accent)]">
-        {eyebrow}
-      </div>
-      <h2 className="mt-2 font-display text-[26px] sm:text-[34px] font-semibold tracking-[-0.02em] text-white">
-        {title}
-      </h2>
-      <div className="mt-5 min-w-0 space-y-4 text-[14px] sm:text-[15px] leading-relaxed text-[var(--color-text-mute)]">
-        {children}
-      </div>
-    </section>
-  );
-}
-
 export default function DocsPage() {
   return (
-    <div className="mx-auto w-full max-w-6xl min-w-0 px-4 sm:px-6 py-12 sm:py-16">
-      <header className="mb-10 grid gap-6 lg:grid-cols-[1fr_320px] lg:items-end">
-        <div>
-          <h1 className="font-display text-[44px] sm:text-[68px] leading-[0.95] font-semibold tracking-[-0.03em] text-white">
-            Packet-based module blocking.
-          </h1>
-          <p className="mt-5 max-w-2xl text-[15px] sm:text-[16px] leading-relaxed text-[var(--color-text-mute)]">
-            Server-driven feature restrictions for Flarial. Use this when a server needs to block modules without shipping a new client-side hardcoded IP check.
-          </p>
-        </div>
-
-        <aside className="rounded-[var(--radius-2xl)] p-4" style={{ background: "var(--color-bg-nav)", boxShadow: "var(--shadow-rest)" }}>
-          <div className="flex items-center gap-2 text-white font-display font-semibold">
-            <BookOpen size={17} className="text-[var(--color-accent)]" />
-            In this article
-          </div>
-          <nav className="mt-4 grid gap-2 text-[13px] text-[var(--color-text-mute)]">
-            <a href="#overview" className="hover:text-white">Overview</a>
-            <a href="#packet-format" className="hover:text-white">Packet format</a>
-            <a href="#examples" className="hover:text-white">Examples</a>
-            <a href="#blockable-modules" className="hover:text-white">Blockable modules</a>
-            <a href="#client-behavior" className="hover:text-white">Client behavior</a>
-            <a href="#safety" className="hover:text-white">Server implementation notes</a>
-          </nav>
-        </aside>
-      </header>
-
-      <div className="grid grid-cols-1 gap-5">
-        <Section id="overview" eyebrow="01" title="How it works">
-          <p>
-            Flarial listens for an inbound Bedrock <code className="text-white">ScriptMessagePacket</code>. If the packet has the expected Flarial header, the client parses the JSON payload and applies temporary server restrictions to matching modules.
-          </p>
-          <ol className="grid grid-cols-1 gap-2">
-            {flow.map((item, index) => (
-              <li key={item} className="flex gap-3">
-                <span className="mt-0.5 grid h-6 w-6 shrink-0 place-items-center rounded-full bg-[var(--color-accent)] text-[11px] font-bold text-white">
-                  {index + 1}
-                </span>
-                <span className="min-w-0 flex-1">{item}</span>
-              </li>
-            ))}
-          </ol>
-        </Section>
-
-        <Section id="packet-format" eyebrow="02" title="Packet format">
-          <p>
-            Send a <code className="text-white">ScriptMessagePacket</code> with this exact message id:
-          </p>
-          <CodeBlock>{"flarial_client_event:restrict_features"}</CodeBlock>
-          <p>
-            The message body is a JSON object. Each entry under <code className="text-white">flarial_client_modules</code> describes one blocked module.
-          </p>
-          <CodeBlock>{restrictThreePayload}</CodeBlock>
-        </Section>
-
-        <Section id="examples" eyebrow="03" title="Examples">
-          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-            <div className="min-w-0 space-y-3">
-              <h3 className="font-display text-[18px] font-semibold text-white">Block one module</h3>
-              <CodeBlock>{restrictOnePayload}</CodeBlock>
-            </div>
-            <div className="min-w-0 space-y-3">
-              <h3 className="font-display text-[18px] font-semibold text-white">Clear packet restrictions</h3>
-              <CodeBlock>{clearPayload}</CodeBlock>
-            </div>
-          </div>
-          <p>
-            Any payload replaces the current packet-driven restriction set. Sending an empty <code className="text-white">flarial_client_modules</code> object clears existing packet restrictions.
-          </p>
-        </Section>
-
-        <Section id="blockable-modules" eyebrow="04" title="Every blockable module">
-          <p>
-            This list is synced from the <code className="text-white">dll-css</code> module registry on <code className="text-white">origin/main</code>. Any registered module can be blocked because the listener resolves against <code className="text-white">ModuleManager::moduleMap</code>.
-          </p>
-          <div className="flex items-center gap-2 rounded-[var(--radius-xl)] bg-black/25 p-4 text-white">
-            <ListChecks size={17} className="text-[var(--color-accent)]" />
-            <span className="font-display font-semibold">{blockableModules.length} blockable module keys</span>
-          </div>
-          <div className="overflow-hidden rounded-[var(--radius-xl)] border border-white/[0.06]">
-            <div className="hidden sm:grid grid-cols-[minmax(140px,0.8fr)_minmax(180px,1.1fr)_minmax(180px,1fr)] gap-3 bg-black/35 px-4 py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--color-text-mute)]">
-              <span>Module</span>
-              <span>Recommended key</span>
-              <span>Accepted aliases</span>
-            </div>
-            <div className="divide-y divide-white/[0.05]">
-              {blockableModules.map((module) => (
-                <div key={module.name} className="grid gap-2 px-4 py-3 text-[13px] sm:grid-cols-[minmax(140px,0.8fr)_minmax(180px,1.1fr)_minmax(180px,1fr)] sm:gap-3">
-                  <span className="font-display font-semibold text-white">{module.name}</span>
-                  <code className="break-all text-[var(--color-accent-hi)]">{module.token}</code>
-                  <span className="break-words text-[var(--color-text-mute)]">{module.aliases.join(", ")}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </Section>
-
-        <Section id="client-behavior" eyebrow="05" title="Client behavior">
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div className="min-w-0 rounded-[var(--radius-xl)] bg-black/25 p-4">
-              <div className="mb-2 flex items-center gap-2 font-display font-semibold text-white">
-                <ShieldCheck size={16} className="text-[var(--color-accent)]" />
-                When blocked
-              </div>
-              <p>The module is marked server-restricted, disabled if currently active, and cannot be toggled back on while the restriction is active.</p>
-            </div>
-            <div className="min-w-0 rounded-[var(--radius-xl)] bg-black/25 p-4">
-              <div className="mb-2 flex items-center gap-2 font-display font-semibold text-white">
-                <FileCode2 size={16} className="text-[var(--color-accent)]" />
-                When cleared
-              </div>
-              <p>Restrictions clear on disconnect, transfer, start-game, or when a replacement payload omits/clears a module. If the module was previously enabled in settings, it can be queued to re-enable.</p>
-            </div>
-          </div>
-        </Section>
-
-        <Section id="safety" eyebrow="06" title="Server implementation notes">
-          <ul className="grid grid-cols-1 gap-2">
-            {serverImplementationNotes.map((note) => (
-              <li key={note} className="flex gap-3">
-                <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--color-accent)]" />
-                <span className="min-w-0 flex-1">{note}</span>
-              </li>
-            ))}
-          </ul>
-          <p>
-            Packet-based restrictions are the preferred way to define server policy. They let server owners update restrictions without waiting for hardcoded client-side server checks or a new client release.
-          </p>
-        </Section>
-      </div>
-    </div>
+    <>
+      <OpenLastDocsArticle />
+      <DocsArticlePage article={docsArticles[0]} rememberArticle={false} />
+    </>
   );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cb95f98..5467c33 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -130,105 +130,89 @@ packages:
     resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.2.4':
     resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-ppc64@1.2.4':
     resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-riscv64@1.2.4':
     resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.2.4':
     resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.2.4':
     resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
     resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.2.4':
     resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-linux-arm64@0.34.5':
     resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-arm@0.34.5':
     resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-ppc64@0.34.5':
     resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-riscv64@0.34.5':
     resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.34.5':
     resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-x64@0.34.5':
     resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linuxmusl-arm64@0.34.5':
     resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.34.5':
     resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-wasm32@0.34.5':
     resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
@@ -289,28 +273,24 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@next/swc-linux-arm64-musl@16.2.6':
     resolution: {integrity: sha512-URUTu1+dMkxJsPFgm+OeEvq9wf5sujw0EvgYy80TDGHTSLTnIHeqb0Eu8A3sC95IRgjejQL+kC4mw+4yPxiAXA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@next/swc-linux-x64-gnu@16.2.6':
     resolution: {integrity: sha512-DOj182mPV8G3UkrayLoREM5YEYI+Dk5wv7Ox9xl1fFibAELEsFD0lDPfHIeILlutMMfdyhlzYPELG3peuKaurw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@next/swc-linux-x64-musl@16.2.6':
     resolution: {integrity: sha512-HKQ5SP/V/ub73UvF7n/zeJlxk2kLmtL7Wzrg4WfmkjmNos5onJ2tKu7yZOPdL18A6Svfn3max29ym+ry7NkK4g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@next/swc-win32-arm64-msvc@16.2.6':
     resolution: {integrity: sha512-LZXpTlPyS5v7HhSmnvsLGP3iIYgYOBnc8r8ArlT55sGHV89bR2HlDdBjWQ+PY6SJMmk8TuVGFuxalnP3k/0Dwg==}
@@ -789,28 +769,24 @@ packages:
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
     resolution: {integrity: sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
     resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.3.0':
     resolution: {integrity: sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.3.0':
     resolution: {integrity: sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==}
@@ -1385,28 +1361,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.32.0:
     resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.32.0:
     resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.32.0:
     resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.32.0:
     resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
diff --git a/public/flarial-icons/booster-logo.png b/public/flarial-icons/booster-logo.png
new file mode 100644
index 0000000..cde9e0b
Binary files /dev/null and b/public/flarial-icons/booster-logo.png differ
diff --git a/public/flarial-icons/cyan-logo.png b/public/flarial-icons/cyan-logo.png
new file mode 100644
index 0000000..f9f8456
Binary files /dev/null and b/public/flarial-icons/cyan-logo.png differ
diff --git a/public/flarial-icons/gamer-logo.png b/public/flarial-icons/gamer-logo.png
new file mode 100644
index 0000000..e2ddc05
Binary files /dev/null and b/public/flarial-icons/gamer-logo.png differ
diff --git a/public/flarial-icons/media-logo.png b/public/flarial-icons/media-logo.png
new file mode 100644
index 0000000..86449b4
Binary files /dev/null and b/public/flarial-icons/media-logo.png differ
diff --git a/public/flarial-icons/red-logo.png b/public/flarial-icons/red-logo.png
new file mode 100644
index 0000000..c67475d
Binary files /dev/null and b/public/flarial-icons/red-logo.png differ
diff --git a/public/flarial-icons/supporter-logo.png b/public/flarial-icons/supporter-logo.png
new file mode 100644
index 0000000..a741192
Binary files /dev/null and b/public/flarial-icons/supporter-logo.png differ
diff --git a/public/flarial-icons/white-logo.png b/public/flarial-icons/white-logo.png
new file mode 100644
index 0000000..66a3ef9
Binary files /dev/null and b/public/flarial-icons/white-logo.png differ
diff --git a/public/misc-imgs/ingame_logo.png b/public/misc-imgs/ingame_logo.png
new file mode 100644
index 0000000..d5ccf65
Binary files /dev/null and b/public/misc-imgs/ingame_logo.png differ
diff --git a/public/mod-icons/discord-white.png b/public/mod-icons/discord-white.png
new file mode 100644
index 0000000..65864d4
Binary files /dev/null and b/public/mod-icons/discord-white.png differ
diff --git a/tsconfig.json b/tsconfig.json
index 3a13f90..e83516c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,7 +23,9 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
   "include": [
@@ -30,5 +36,7 @@
     ".next/dev/types/**/*.ts",
     "**/*.mts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }