diff --git a/.prettierignore b/.prettierignore
index 57d0389..54ad965 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,3 +1,4 @@
 .next
 out
-pnpm-lock.yaml
\ No newline at end of file
+pnpm-lock.yaml
+node_modules
diff --git a/README.md b/README.md
index be54d92..649f220 100644
--- a/README.md
+++ b/README.md
@@ -49,5 +49,7 @@ A general list for any contributors. If you make a contribution add yourself her
 - Quite a Fancy Emerald
 - sexyduceduce
 - mdoryammilwalrus
+- Crllect
+- xmb9
 
 If you wish to support TitaniumNetwork please check out our Discord!
diff --git a/package.json b/package.json
index 4f8c133..8d7e3e7 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
 	"homepage": "https://titaniumnetwork.org",
 	"scripts": {
 		"dev": "next dev",
-		"build": "next build --webpack",
+		"build": "next build",
 		"start": "next start",
 		"format": "prettier --write .",
 		"lint": "next lint"
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..6d38f1f
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+allowBuilds:
+    sharp: true
diff --git a/prettier.config.js b/prettier.config.js
index b8b614a..5749b39 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -6,6 +6,7 @@ const config = {
 	useTabs: true,
 	semi: true,
 	singleQuote: false,
+	tabWidth: 4,
 };
 
 export default config;
diff --git a/src/app/error.tsx b/src/app/error.tsx
index 63843ab..a31f936 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -9,7 +9,9 @@ export default function Error() {
 			<div className="content">
 				<div className="container">
 					<div data-aos="fade-right">
-						<p className="header-text">{disabled("TitaniumNetwork")}</p>
+						<p className="header-text">
+							{disabled("TitaniumNetwork")}
+						</p>
 						<p>Something went wrong</p>
 					</div>
 				</div>
diff --git a/src/app/globals.css b/src/app/globals.css
index e7546cd..d665353 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -40,7 +40,11 @@ body {
 	color: var(--text);
 	font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
 	background:
-		radial-gradient(circle at 86% 14%, rgba(211, 70, 68, 0.08), transparent 36%),
+		radial-gradient(
+			circle at 86% 14%,
+			rgba(211, 70, 68, 0.08),
+			transparent 36%
+		),
 		linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
 }
 
@@ -58,10 +62,13 @@ h1,
 h2,
 h3 {
 	color: var(--text);
-	font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
+	font-family:
+		var(--font-raleway), "Avenir Next", "Segoe UI", "Helvetica Neue",
+		sans-serif;
 	font-weight: 600;
 	letter-spacing: -0.02em;
 	line-height: 0.98;
+	font-style: normal;
 }
 
 code {
@@ -82,17 +89,23 @@ code {
 	justify-content: center;
 	padding: 0.34rem 0.62rem;
 	color: var(--muted);
-	font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
+	font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
 	font-size: 0.95rem;
 	font-weight: 400;
 	letter-spacing: 0.08em;
 	text-transform: uppercase;
-	transition: color 0.1s ease, text-shadow 0.1s ease, transform 0.1s ease;
+	transition:
+		color 0.1s ease,
+		text-shadow 0.1s ease,
+		transform 0.1s ease;
 }
 
 .nav-link-label {
 	display: inline-block;
-	transition: color 0.1s ease, text-shadow 0.1s ease, transform 0.1s ease;
+	transition:
+		color 0.1s ease,
+		text-shadow 0.1s ease,
+		transform 0.1s ease;
 }
 
 .nav-link-plain:hover,
@@ -101,13 +114,51 @@ code {
 	text-shadow: 0 0 1px color-mix(in oklab, var(--primary) 58%, white 42%);
 }
 
+.mobile-nav-link {
+	display: flex;
+	align-items: center;
+	min-height: 2.6rem;
+	padding: 0.5rem 0.72rem;
+	border: 1px solid rgba(255, 255, 255, 0.12);
+	border-radius: 10px;
+	background: rgba(255, 255, 255, 0.04);
+	color: var(--muted);
+	font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
+	font-size: 0.92rem;
+	font-weight: 500;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	transition:
+		color 0.1s ease,
+		background-color 0.1s ease,
+		border-color 0.1s ease,
+		text-shadow 0.1s ease;
+}
+
+.mobile-nav-link:hover,
+.mobile-nav-link:focus-visible {
+	border-color: color-mix(in oklab, var(--primary) 68%, white 32%);
+	background: color-mix(in oklab, var(--primary) 12%, transparent);
+	color: color-mix(in oklab, var(--primary) 72%, white 28%);
+	text-shadow: 0 0 1px color-mix(in oklab, var(--primary) 58%, white 42%);
+}
+
+.mobile-nav-link-active {
+	border-color: rgba(255, 255, 255, 0.25);
+	background: rgba(255, 255, 255, 0.1);
+	color: rgba(255, 248, 251, 0.95);
+	text-shadow: 0 0 1px rgba(255, 248, 251, 0.3);
+}
+
 .dock-brand-icon {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	transform: scale(1);
 	color: rgba(255, 248, 251, 0.78);
-	filter: drop-shadow(0 0 0 color-mix(in oklab, var(--primary) 58%, white 42%));
+	filter: drop-shadow(
+		0 0 0 color-mix(in oklab, var(--primary) 58%, white 42%)
+	);
 	transition:
 		color 0.1s ease,
 		filter 0.1s ease,
@@ -119,13 +170,17 @@ code {
 .dock-brand-button:focus-visible .dock-brand-icon {
 	transform: scale(1.03);
 	color: color-mix(in oklab, var(--primary) 72%, white 28%);
-	filter: drop-shadow(0 0 0.5px color-mix(in oklab, var(--primary) 58%, white 42%));
+	filter: drop-shadow(
+		0 0 0.5px color-mix(in oklab, var(--primary) 58%, white 42%)
+	);
 }
 
 .dock-brand-button:active .dock-brand-icon {
 	transform: scale(0.97);
 	color: color-mix(in oklab, var(--primary) 64%, white 36%);
-	filter: drop-shadow(0 0 1px color-mix(in oklab, var(--primary) 52%, white 48%));
+	filter: drop-shadow(
+		0 0 1px color-mix(in oklab, var(--primary) 52%, white 48%)
+	);
 }
 
 .content-frame {
@@ -174,7 +229,7 @@ code {
 .legacy-stack {
 	display: grid;
 	gap: 1rem;
-	font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
+	font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
 	font-weight: 400;
 }
 
@@ -206,7 +261,9 @@ code {
 .service-source,
 .service-name {
 	color: var(--text);
-	transition: color 0.18s ease, text-shadow 0.18s ease;
+	transition:
+		color 0.18s ease,
+		text-shadow 0.18s ease;
 }
 
 .legacy-stack a:hover,
@@ -293,6 +350,7 @@ code {
 .service-source {
 	color: var(--muted);
 	font-size: 0.9rem;
+	white-space: nowrap;
 }
 
 .social-badge {
@@ -329,17 +387,27 @@ code {
 		display: block;
 		font-size: clamp(2.7rem, 12vw, 4rem);
 	}
-
-	.nav-link-plain {
-		font-size: 0.84rem;
-		padding: 0.28rem 0.5rem;
-	}
 }
 
 @media (max-width: 720px) {
 	.service-row-legacy,
 	.social-row-legacy {
-		flex-direction: column;
-		align-items: flex-start;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: nowrap;
+		padding: 0.78rem 0.82rem;
+		gap: 0.75rem;
+	}
+
+	.service-name,
+	.social-name {
+		min-width: 0;
+		flex: 1 1 auto;
+	}
+
+	.service-meta,
+	.social-badge {
+		flex: 0 0 auto;
 	}
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 60c602f..2b71d1c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,14 @@
 import { Metadata, Viewport } from "next";
+import { Raleway } from "next/font/google";
 import Nav from "../components/Nav";
 import "./globals.css";
 
+const raleway = Raleway({
+	subsets: ["latin"],
+	weight: ["600"],
+	variable: "--font-raleway",
+});
+
 export const metadata: Metadata = {
 	title: "TitaniumNetwork",
 	description:
@@ -28,7 +35,10 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<html lang="en">
+		<html
+			lang="en"
+			className={`bg-[#220934] text-white ${raleway.variable}`}
+		>
 			<head>
 				<script
 					type="application/ld+json"
@@ -129,7 +139,7 @@ export default function RootLayout({
 									name: "Where can I obtain more proxy sites?",
 									acceptedAnswer: {
 										"@type": "Answer",
-										text: 'Be sure to join the TitaniumNetwork discord at discord.gg/unblock! Then simply use the bot in #panel to get a new link.',
+										text: "Be sure to join the TitaniumNetwork discord at discord.gg/unblock! Then simply use the bot in #panel to get a new link.",
 									},
 								},
 								{
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 9e831ba..0c802a3 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -10,7 +10,9 @@ export default function NotFound() {
 		<main className="mx-auto w-full max-w-275 px-4 pb-16 pt-8 md:px-8">
 			<section className="content-frame min-h-[calc(100vh-11.5rem)] grid place-items-center pt-6 pb-8">
 				<div className="w-full max-w-180 text-center">
-					<p className="text-sm font-semibold tracking-[0.18em] text-white/65">404</p>
+					<p className="text-sm font-semibold tracking-[0.18em] text-white/65">
+						404
+					</p>
 					<h1 className="mt-3 text-balance text-[clamp(2.1rem,6.2vw,4rem)] leading-[0.95] tracking-[-0.03em] text-white">
 						Page Not Found
 					</h1>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 545e6b6..7c6f20e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -15,8 +15,9 @@ export default function Home() {
 						TitaniumNetwork
 					</h1>
 					<p className="mx-auto mt-6 max-w-[52ch] text-[clamp(1.02rem,1.9vw,1.34rem)] leading-relaxed text-white/78">
-						Services for a less restrictive web experience, built with a focus on
-						access, privacy, and practical deployment.
+						Services for a less restrictive web experience, built
+						with a focus on access, privacy, and practical
+						deployment.
 					</p>
 					<HeroActions
 						actions={[
@@ -31,8 +32,7 @@ export default function Home() {
 								label: "Documentation",
 								variant: "secondary",
 								external: true,
-								title:
-									"Look here for either contributing or hosting your own web proxy service using our various open-source projects!",
+								title: "Look here for either contributing or hosting your own web proxy service using our various open-source projects!",
 							},
 						]}
 					/>
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index e550100..43f1c52 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -90,22 +90,31 @@ export default function Services() {
 					</FadeIn>
 
 					{serviceGroups.map((group, index) => (
-						<FadeIn className="service-group" key={group.title} delay={index * 0.05 + 0.02}>
-							<h3 className="service-group-title">{group.title}</h3>
+						<FadeIn
+							className="service-group"
+							key={group.title}
+							delay={index * 0.05 + 0.02}
+						>
+							<h3 className="service-group-title">
+								{group.title}
+							</h3>
 							<ul className="service-list-legacy service-group-list">
 								{group.services.map((service) => (
 									<li key={service.name}>
-										<Service href={service.href} source={service.source}>
+										<Service
+											href={service.href}
+											source={service.source}
+										>
 											{service.name}
 										</Service>
 									</li>
 								))}
 							</ul>
 						</FadeIn>
-						))}
-					</div>
-				</section>
-			</main>
+					))}
+				</div>
+			</section>
+		</main>
 	);
 }
 
@@ -118,15 +127,15 @@ function Service({
 	children: React.ReactNode;
 	source?: string;
 }) {
-		return (
-			<div className="service-row-legacy">
-				<a className="service-name" href={href} target="_blank">
-					{children}
-				</a>
-				<div className="service-meta">
-					{source ? (
-						<a className="service-source" href={source} target="_blank">
-							[Source]
+	return (
+		<div className="service-row-legacy">
+			<a className="service-name" href={href} target="_blank">
+				{children}
+			</a>
+			<div className="service-meta">
+				{source ? (
+					<a className="service-source" href={source} target="_blank">
+						[Source]
 					</a>
 				) : null}
 			</div>
diff --git a/src/app/setup/page.tsx b/src/app/setup/page.tsx
index 424419f..ae0174f 100644
--- a/src/app/setup/page.tsx
+++ b/src/app/setup/page.tsx
@@ -14,47 +14,62 @@ export default function Setup() {
 					<div className="legacy-stack">
 						<h1 id="usage">Usage</h1>
 						<p>
-							TitaniumNetwork&apos;s services can be utilized either by hosting
-							manually or using the officially hosted services. These services
-							such as InvisiProxy or AnuraOS can be obtained in the{" "}
+							TitaniumNetwork&apos;s services can be utilized
+							either by hosting manually or using the officially
+							hosted services. These services such as InvisiProxy
+							or AnuraOS can be obtained in the{" "}
 							<strong>
-								<a href="https://discord.gg/unblock" target="_blank">
+								<a
+									href="https://discord.gg/unblock"
+									target="_blank"
+								>
 									TN Discord
 								</a>
 							</strong>{" "}
-							with a brief overview on the <strong>
+							with a brief overview on the{" "}
+							<strong>
 								<Link href="/services">Services</Link>
-							</strong>.
+							</strong>
+							.
 						</p>
 						<h3>Web Proxy Services</h3>
 						<p>
-							In order to use a web proxy site, you would simply obtain any of our
-							official domains (URLs/mirrors) from the TitaniumNetwork discord.
+							In order to use a web proxy site, you would simply
+							obtain any of our official domains (URLs/mirrors)
+							from the TitaniumNetwork discord.
 						</p>
 						<p>
-							Example Mirror/URL: <code>https://invisiproxy.com</code>
+							Example Mirror/URL:{" "}
+							<code>https://invisiproxy.com</code>
 						</p>
 						<p>
-							Then you would just simply access the mirror URL on any modern
-							browser, enter in a site within the search engine on the proxy site
-							and enjoy unblocked content!
+							Then you would just simply access the mirror URL on
+							any modern browser, enter in a site within the
+							search engine on the proxy site and enjoy unblocked
+							content!
 						</p>
 						<h3>Kajigs</h3>
 						<p>
-							A repository of methods/exploits (found in the TN discord)
-							maintained by TitaniumNetwork you can employ enabling you to bypass
-							restrictions!
+							A repository of methods/exploits (found in the TN
+							discord) maintained by TitaniumNetwork you can
+							employ enabling you to bypass restrictions!
 						</p>
 						<p>
-							These exploits range from WebView bypasses, Extension bypasses,
-							chromeOS vulnerabilities, Windows elevation bypasses, and most web
-							filter bypasses.
+							These exploits range from WebView bypasses,
+							Extension bypasses, chromeOS vulnerabilities,
+							Windows elevation bypasses, and most web filter
+							bypasses.
 						</p>
 						<h3>Setup</h3>
 						<p>
-							If you wish to setup any of TitaniumNetwork&apos;s services please
-							check out{" "}
-							<strong><a href="https://docs.titaniumnetwork.org">the documentation</a></strong>.
+							If you wish to setup any of TitaniumNetwork&apos;s
+							services please check out{" "}
+							<strong>
+								<a href="https://docs.titaniumnetwork.org">
+									the documentation
+								</a>
+							</strong>
+							.
 						</p>
 					</div>
 				</section>
diff --git a/src/app/socials/page.tsx b/src/app/socials/page.tsx
index 20222a0..6026968 100644
--- a/src/app/socials/page.tsx
+++ b/src/app/socials/page.tsx
@@ -70,7 +70,11 @@ export default function Socials() {
 						{socials.map((social, index) => (
 							<li key={social.name}>
 								<FadeIn delay={index * 0.04 + 0.03}>
-									<Social url={social.url} name={social.name} Icon={social.icon} />
+									<Social
+										url={social.url}
+										name={social.name}
+										Icon={social.icon}
+									/>
 								</FadeIn>
 							</li>
 						))}
diff --git a/src/components/HeroActions.tsx b/src/components/HeroActions.tsx
index 79a466c..da54522 100644
--- a/src/components/HeroActions.tsx
+++ b/src/components/HeroActions.tsx
@@ -20,26 +20,34 @@ export function HeroActions({ actions }: { actions: HeroAction[] }) {
 	const secondaryButtonClass =
 		"text-white border-white/30 bg-white/[0.06] hover:bg-white/[0.1] hover:border-white/50";
 
-		return (
-			<motion.div
-				className="mt-9 flex flex-wrap justify-center gap-3"
-				initial={prefersReducedMotion ? false : { opacity: 0, y: 14 }}
-				animate={prefersReducedMotion ? undefined : { opacity: 1, y: 0 }}
-				transition={{ duration: 0.44, ease: [0.2, 0.9, 0.2, 1] }}
-			>
+	return (
+		<motion.div
+			className="mt-9 flex flex-wrap justify-center gap-3"
+			initial={prefersReducedMotion ? false : { opacity: 0, y: 14 }}
+			animate={prefersReducedMotion ? undefined : { opacity: 1, y: 0 }}
+			transition={{ duration: 0.44, ease: [0.2, 0.9, 0.2, 1] }}
+		>
 			{actions.map((action, index) => (
 				<motion.div
 					key={action.label}
 					className="inline-flex"
-					initial={prefersReducedMotion ? false : { opacity: 0, y: 8 }}
-					animate={prefersReducedMotion ? undefined : { opacity: 1, y: 0 }}
-						transition={{
-							duration: 0.36,
-							ease: [0.22, 1, 0.36, 1],
-						}}
-						whileHover={prefersReducedMotion ? undefined : { scale: 1.04 }}
-						whileTap={prefersReducedMotion ? undefined : { scale: 0.97 }}
-					>
+					initial={
+						prefersReducedMotion ? false : { opacity: 0, y: 8 }
+					}
+					animate={
+						prefersReducedMotion ? undefined : { opacity: 1, y: 0 }
+					}
+					transition={{
+						duration: 0.36,
+						ease: [0.22, 1, 0.36, 1],
+					}}
+					whileHover={
+						prefersReducedMotion ? undefined : { scale: 1.04 }
+					}
+					whileTap={
+						prefersReducedMotion ? undefined : { scale: 0.97 }
+					}
+				>
 					{action.external ? (
 						<a
 							title={action.title}
diff --git a/src/components/Motion.tsx b/src/components/Motion.tsx
index 6da2ced..586a771 100644
--- a/src/components/Motion.tsx
+++ b/src/components/Motion.tsx
@@ -9,14 +9,21 @@ type FadeInProps = {
 	y?: number;
 };
 
-export function FadeIn({ children, className, delay = 0, y = 18 }: FadeInProps) {
+export function FadeIn({
+	children,
+	className,
+	delay = 0,
+	y = 18,
+}: FadeInProps) {
 	const prefersReducedMotion = useReducedMotion();
 
 	return (
 		<motion.div
 			className={className}
 			initial={prefersReducedMotion ? false : { opacity: 0, y }}
-			whileInView={prefersReducedMotion ? undefined : { opacity: 1, y: 0 }}
+			whileInView={
+				prefersReducedMotion ? undefined : { opacity: 1, y: 0 }
+			}
 			viewport={{ once: true, amount: 0.2 }}
 			transition={{ duration: 0.55, ease: [0.2, 0.9, 0.2, 1], delay }}
 		>
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 26a6586..daa5ae8 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { motion, useReducedMotion } from "framer-motion";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import type { ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { FaDiscord, FaGithub } from "react-icons/fa6";
 
 const navLinks = [
@@ -13,10 +13,16 @@ const navLinks = [
 	{ href: "https://docs.titaniumnetwork.org", label: "Docs", external: true },
 ];
 
+const navHoverColor = "#e57f77";
+const navHoverShadowColor = "#ed9891";
+const navTapColor = "#ea8d86";
+const navTapShadowColor = "#f0a39c";
+
 export default function Nav() {
 	const pathname = usePathname();
 	const router = useRouter();
 	const prefersReducedMotion = useReducedMotion();
+	const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 	const navLabelVariants = prefersReducedMotion
 		? undefined
 		: {
@@ -27,13 +33,13 @@ export default function Nav() {
 				},
 				hover: {
 					scale: 1.01,
-					color: "color-mix(in oklab, var(--primary) 72%, white 28%)",
-					textShadow: "0 0 1px color-mix(in oklab, var(--primary) 58%, white 42%)",
+					color: navHoverColor,
+					textShadow: `0 0 1px ${navHoverShadowColor}`,
 				},
 				tap: {
 					scale: 0.97,
-					color: "color-mix(in oklab, var(--primary) 64%, white 36%)",
-					textShadow: "0 0 1px color-mix(in oklab, var(--primary) 52%, white 48%)",
+					color: navTapColor,
+					textShadow: `0 0 1px ${navTapShadowColor}`,
 				},
 				active: {
 					scale: 1,
@@ -43,9 +49,18 @@ export default function Nav() {
 			};
 
 	const isHomeActive = pathname === "/";
-	const isNavItemActive = (href: string) => pathname === href || pathname.startsWith(`${href}/`);
+	const isNavItemActive = (href: string) =>
+		pathname === href || pathname.startsWith(`${href}/`);
+
+	useEffect(() => {
+		setIsMobileMenuOpen(false);
+	}, [pathname]);
 
-	const handleInternalNav = (event: React.MouseEvent<HTMLAnchorElement>, href: string) => {
+	const handleInternalNav = (
+		event: React.MouseEvent<HTMLAnchorElement>,
+		href: string
+	) => {
+		setIsMobileMenuOpen(false);
 		if (prefersReducedMotion) return;
 		if (
 			event.defaultPrevented ||
@@ -65,15 +80,150 @@ export default function Nav() {
 
 	return (
 		<header className="sticky top-0 z-40">
-			<div className="w-full">
+			<div className="relative md:hidden backdrop-blur-sm border-b border-white/14 bg-[#220934]/20">
+				<div className="flex h-14 items-center justify-between px-3">
+					<Link
+						href="/"
+						className="min-w-0 text-sm font-semibold tracking-[0.18em] text-white"
+						aria-label="TitaniumNetwork home"
+					>
+						<span
+							className="align-middle text-lg"
+							style={{
+								color: "color-mix(in oklab, var(--primary) 72%, white 28%)",
+								textShadow:
+									"0 0 1px color-mix(in oklab, var(--primary) 58%, white 42%)",
+							}}
+						>
+							[
+						</span>
+						<span
+							className="mx-1.5 align-middle"
+							style={{
+								color: "rgba(255,248,251,1)",
+								textShadow: "0 0 1px rgba(255,248,251,0.22)",
+							}}
+						>
+							TN
+						</span>
+						<span
+							className="align-middle text-lg"
+							style={{
+								color: "color-mix(in oklab, var(--primary) 72%, white 28%)",
+								textShadow:
+									"0 0 1px color-mix(in oklab, var(--primary) 58%, white 42%)",
+							}}
+						>
+							]
+						</span>
+					</Link>
+
+					<button
+						type="button"
+						aria-label={
+							isMobileMenuOpen ? "Close menu" : "Open menu"
+						}
+						aria-expanded={isMobileMenuOpen}
+						aria-controls="mobile-main-nav"
+						onClick={() => setIsMobileMenuOpen((open) => !open)}
+						className="inline-flex h-10 items-center justify-center rounded-md px-3 text-xs tracking-[0.18em] text-white/86 transition-colors duration-150 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--primary)"
+					>
+						{isMobileMenuOpen ? "Close" : "Menu"}
+					</button>
+				</div>
+
+				<AnimatePresence>
+					{isMobileMenuOpen ? (
+						<motion.div
+							id="mobile-main-nav"
+							initial={
+								prefersReducedMotion
+									? false
+									: { opacity: 0, y: -8, scale: 0.985 }
+							}
+							animate={
+								prefersReducedMotion
+									? {}
+									: { opacity: 1, y: 0, scale: 1 }
+							}
+							exit={
+								prefersReducedMotion
+									? {}
+									: { opacity: 0, y: -6, scale: 0.99 }
+							}
+							transition={{ duration: 0.16, ease: "easeOut" }}
+							className="absolute left-3 right-3 top-14 z-30 rounded-xl border border-white/14 bg-[#220934]/96 p-3 shadow-[0_16px_34px_rgba(6,0,12,0.35)] backdrop-blur"
+						>
+							<ul className="grid gap-2">
+								{navLinks.map((item, index) => (
+									<motion.li
+										key={item.label}
+										initial={
+											prefersReducedMotion
+												? false
+												: { opacity: 0, y: -4 }
+										}
+										animate={
+											prefersReducedMotion
+												? {}
+												: { opacity: 1, y: 0 }
+										}
+										exit={
+											prefersReducedMotion
+												? {}
+												: { opacity: 0, y: -2 }
+										}
+										transition={{
+											duration: 0.14,
+											ease: "easeOut",
+											delay: prefersReducedMotion
+												? 0
+												: index * 0.02,
+										}}
+									>
+										{item.external ? (
+											<a
+												href={item.href}
+												target="_blank"
+												rel="noreferrer"
+												className="mobile-nav-link"
+												onClick={() =>
+													setIsMobileMenuOpen(false)
+												}
+											>
+												{item.label}
+											</a>
+										) : (
+											<Link
+												href={item.href}
+												className={`mobile-nav-link ${isNavItemActive(item.href) ? "mobile-nav-link-active" : ""}`}
+												onClick={(event) =>
+													handleInternalNav(
+														event,
+														item.href
+													)
+												}
+											>
+												{item.label}
+											</Link>
+										)}
+									</motion.li>
+								))}
+							</ul>
+						</motion.div>
+					) : null}
+				</AnimatePresence>
+			</div>
+
+			<div className="hidden w-full md:block">
 				<div className="flex items-start gap-3">
 					<Link
 						href="/"
-						className="group shrink-0 pl-3 pt-2 font-semibold tracking-[0.2em] text-white md:pl-5 md:pt-2.5 text-lg mr-auto"
+						className="group mr-auto shrink-0 pl-3 pt-2 text-lg font-semibold tracking-[0.2em] text-white md:pl-5 md:pt-2.5"
 						aria-label="TitaniumNetwork home"
 					>
-							<span
-								className="align-middle text-3xl text-white/70 [text-shadow:0_0_0_transparent] transition-[color,text-shadow] duration-150 ease-out group-hover:text-[color-mix(in_oklab,var(--primary)_72%,white_28%)] group-hover:[text-shadow:0_0_1px_color-mix(in_oklab,var(--primary)_58%,white_42%)]"
+						<span
+							className="align-middle text-3xl text-white/70 [text-shadow:0_0_0_transparent] transition-[color,text-shadow] duration-150 ease-out group-hover:text-[color-mix(in_oklab,var(--primary)_72%,white_28%)] group-hover:[text-shadow:0_0_1px_color-mix(in_oklab,var(--primary)_58%,white_42%)]"
 							style={
 								isHomeActive
 									? {
@@ -86,21 +236,22 @@ export default function Nav() {
 						>
 							[
 						</span>
-							<span
-								className="mx-1.5 align-middle text-white/82 transition-colors duration-150 ease-out group-hover:text-white"
+						<span
+							className="mx-1.5 align-middle text-white/82 transition-colors duration-150 ease-out group-hover:text-white font-['Raleway'] tracking-normal top-0.75 relative"
 							style={
 								isHomeActive
 									? {
 											color: "rgba(255,248,251,1)",
-											textShadow: "0 0 1px rgba(255,248,251,0.22)",
+											textShadow:
+												"0 0 1px rgba(255,248,251,0.22)",
 										}
 									: undefined
 							}
 						>
-							TITANIUMNETWORK
+							TitaniumNetwork
 						</span>
-							<span
-								className="align-middle text-3xl text-white/70 [text-shadow:0_0_0_transparent] transition-[color,text-shadow] duration-150 ease-out group-hover:text-[color-mix(in_oklab,var(--primary)_72%,white_28%)] group-hover:[text-shadow:0_0_1px_color-mix(in_oklab,var(--primary)_58%,white_42%)]"
+						<span
+							className="align-middle text-3xl text-white/70 [text-shadow:0_0_0_transparent] transition-[color,text-shadow] duration-150 ease-out group-hover:text-[color-mix(in_oklab,var(--primary)_72%,white_28%)] group-hover:[text-shadow:0_0_1px_color-mix(in_oklab,var(--primary)_58%,white_42%)]"
 							style={
 								isHomeActive
 									? {
@@ -115,7 +266,10 @@ export default function Nav() {
 						</span>
 					</Link>
 
-						<nav aria-label="Primary" className="relative h-12 min-w-0 flex-1">
+					<nav
+						aria-label="Primary"
+						className="relative h-12 min-w-0 flex-1"
+					>
 						<div className="relative h-full w-full">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
@@ -123,14 +277,20 @@ export default function Nav() {
 								height="48"
 								viewBox="0 0 210 48"
 								fill="none"
-									className="absolute right-96 top-0 z-0 h-12 w-52.5"
+								className="absolute right-78 top-0 z-0 h-12 w-52.5"
 								role="presentation"
 								aria-hidden="true"
 							>
-								<mask id="path-1-inside-1-nav-main" fill="white">
+								<mask
+									id="path-1-inside-1-nav-main"
+									fill="white"
+								>
 									<path d="M0 0C38.2511 0 21.0006 48 57.7516 48H210V0" />
 								</mask>
-								<path d="M0 0C38.2511 0 21.0006 48 57.7516 48H210V0" fill="#220934" />
+								<path
+									d="M0 0C38.2511 0 21.0006 48 57.7516 48H210V0"
+									fill="#220934"
+								/>
 								<path
 									d="M0 -1C-0.552285 -1 -1 -0.552285 -1 0C-1 0.552285 -0.552285 1 0 1V0V-1ZM210 48V49H211V48H210ZM211 0C211 -0.552285 210.552 -1 210 -1C209.448 -1 209 -0.552285 209 0H210H211ZM57.7516 48V49H210V48V47H57.7516V48ZM210 48H211V0H210H209V48H210ZM0 0V1C9.31973 1 15.1441 3.90917 19.2727 8.19387C23.4583 12.5377 25.9728 18.3582 28.517 24.3887C31.0303 30.346 33.5776 36.5246 37.8674 41.1778C42.2197 45.8988 48.3065 49 57.7516 49V48V47C48.8212 47 43.2827 44.1012 39.3379 39.8222C35.3306 35.4754 32.909 29.654 30.3597 23.6113C27.8412 17.6418 25.1994 11.4623 20.7129 6.80613C16.1693 2.09083 9.80581 -1 0 -1V0Z"
 									fill="white"
@@ -139,85 +299,122 @@ export default function Nav() {
 								/>
 							</svg>
 
-								<div className="nav-rail-extension absolute right-0 w-100 top-0 z-0 h-12" />
-
-								<div className="absolute z-10 flex h-full items-center justify-between right-0 pr-12">
-									<ul className="no-scrollbar flex min-w-0 flex-nowrap items-center gap-x-10 overflow-x-auto">
-											{navLinks.map((item) => (
-												<li key={item.label}>
-													{item.external ? (
-													<motion.a
-														href={item.href}
-														target="_blank"
-														rel="noreferrer"
-														className="nav-link-plain"
-														transition={{ duration: 0.1, ease: "easeOut" }}
+							<div className="nav-rail-extension absolute right-0 top-0 z-0 h-12 w-100" />
+
+							<div className="absolute right-0 z-10 flex h-full items-center justify-between pr-8">
+								<ul className="no-scrollbar flex min-w-0 flex-nowrap items-center gap-x-10 overflow-x-auto">
+									{navLinks.map((item) => (
+										<li key={item.label}>
+											{item.external ? (
+												<motion.a
+													href={item.href}
+													target="_blank"
+													rel="noreferrer"
+													className="nav-link-plain"
+													transition={{
+														duration: 0.1,
+														ease: "easeOut",
+													}}
+												>
+													<motion.span
+														className="nav-link-label"
+														variants={
+															navLabelVariants
+														}
+														initial="rest"
+														animate="rest"
+														whileHover="hover"
+														whileTap="tap"
+														transition={{
+															duration: 0.1,
+															ease: "easeOut",
+														}}
+													>
+														{item.label}
+													</motion.span>
+												</motion.a>
+											) : (
+												<Link
+													href={item.href}
+													className="nav-link-plain"
+													onClick={(event) =>
+														handleInternalNav(
+															event,
+															item.href
+														)
+													}
+												>
+													<motion.span
+														className="nav-link-label"
+														variants={
+															navLabelVariants
+														}
+														initial="rest"
+														animate={
+															isNavItemActive(
+																item.href
+															)
+																? "active"
+																: "rest"
+														}
+														whileHover="hover"
+														whileTap="tap"
+														transition={{
+															duration: 0.1,
+															ease: "easeOut",
+														}}
 													>
-															<motion.span
-																className="nav-link-label"
-																variants={navLabelVariants}
-																initial="rest"
-																animate="rest"
-															whileHover="hover"
-															whileTap="tap"
-															transition={{ duration: 0.1, ease: "easeOut" }}
-														>
-															{item.label}
-														</motion.span>
-													</motion.a>
-													) : (
-														<Link
-															href={item.href}
-															className="nav-link-plain"
-															onClick={(event) => handleInternalNav(event, item.href)}
-														>
-															<motion.span
-																className="nav-link-label"
-																variants={navLabelVariants}
-																initial="rest"
-																animate={isNavItemActive(item.href) ? "active" : "rest"}
-																whileHover="hover"
-																whileTap="tap"
-																transition={{ duration: 0.1, ease: "easeOut" }}
-														>
-															{item.label}
-														</motion.span>
-													</Link>
-												)}
-											</li>
-										))}
-									</ul>
-								</div>
+														{item.label}
+													</motion.span>
+												</Link>
+											)}
+										</li>
+									))}
+								</ul>
 							</div>
-						</nav>
-					</div>
+						</div>
+					</nav>
+				</div>
 			</div>
 
-			<div
-				className="fixed bottom-0 left-0 z-50 flex items-end">
-				<DockBrandButton href="https://discord.gg/unblock" label="Discord">
+			<div className="fixed bottom-0 left-0 z-50 flex items-end">
+				<DockBrandButton
+					href="https://discord.gg/unblock"
+					label="Discord"
+				>
 					<FaDiscord />
 				</DockBrandButton>
-				<DockBrandButton href="https://github.com/titaniumnetwork-dev" label="GitHub">
+				<DockBrandButton
+					href="https://github.com/titaniumnetwork-dev"
+					label="GitHub"
+				>
 					<FaGithub />
 				</DockBrandButton>
 			</div>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				width="210"
-				height="48"
-				viewBox="0 0 210 48"
+				height="50"
+				viewBox="0 0 210 50"
 				style={{ transform: "rotate(180deg)" }}
 				fill="none"
-					className="fixed -left-4 bottom-0 z-0 h-12 w-52.5"
+				className="fixed -left-4 bottom-0 z-0 h-12 w-52.5"
 				role="presentation"
 				aria-hidden="true"
 			>
 				<mask id="path-1-inside-1-nav-main" fill="white">
 					<path d="M0 0C38.2511 0 21.0006 48 57.7516 48H210V0"></path>
 				</mask>
-				<path d="M0 0C38.2511 0 21.0006 48 57.7516 48H210V0" fill="#220934"></path>
-				<path d="M0 -1C-0.552285 -1 -1 -0.552285 -1 0C-1 0.552285 -0.552285 1 0 1V0V-1ZM210 48V49H211V48H210ZM211 0C211 -0.552285 210.552 -1 210 -1C209.448 -1 209 -0.552285 209 0H210H211ZM57.7516 48V49H210V48V47H57.7516V48ZM210 48H211V0H210H209V48H210ZM0 0V1C9.31973 1 15.1441 3.90917 19.2727 8.19387C23.4583 12.5377 25.9728 18.3582 28.517 24.3887C31.0303 30.346 33.5776 36.5246 37.8674 41.1778C42.2197 45.8988 48.3065 49 57.7516 49V48V47C48.8212 47 43.2827 44.1012 39.3379 39.8222C35.3306 35.4754 32.909 29.654 30.3597 23.6113C27.8412 17.6418 25.1994 11.4623 20.7129 6.80613C16.1693 2.09083 9.80581 -1 0 -1V0Z" fill="white" fillOpacity="0.141176" mask="url(#path-1-inside-1-nav-main)"></path>
+				<path
+					d="M0 0C38.2511 0 21.0006 48 57.7516 48H210V0"
+					fill="#220934"
+				></path>
+				<path
+					d="M0 -1C-0.552285 -1 -1 -0.552285 -1 0C-1 0.552285 -0.552285 1 0 1V0V-1ZM210 48V49H211V48H210ZM211 0C211 -0.552285 210.552 -1 210 -1C209.448 -1 209 -0.552285 209 0H210H211ZM57.7516 48V49H210V48V47H57.7516V48ZM210 48H211V0H210H209V48H210ZM0 0V1C9.31973 1 15.1441 3.90917 19.2727 8.19387C23.4583 12.5377 25.9728 18.3582 28.517 24.3887C31.0303 30.346 33.5776 36.5246 37.8674 41.1778C42.2197 45.8988 48.3065 49 57.7516 49V48V47C48.8212 47 43.2827 44.1012 39.3379 39.8222C35.3306 35.4754 32.909 29.654 30.3597 23.6113C27.8412 17.6418 25.1994 11.4623 20.7129 6.80613C16.1693 2.09083 9.80581 -1 0 -1V0Z"
+					fill="white"
+					fillOpacity="0.141176"
+					mask="url(#path-1-inside-1-nav-main)"
+				></path>
 			</svg>
 		</header>
 	);
@@ -233,16 +430,16 @@ function DockBrandButton({
 	children: ReactNode;
 }) {
 	return (
-			<a
-				href={href}
-				target="_blank"
-				rel="noreferrer"
-				aria-label={label}
-				className="dock-brand-button group relative block h-12 w-20"
-			>
-				<span className="dock-brand-icon absolute inset-0 z-10 flex items-center justify-center text-xl">
-					{children}
-				</span>
-			</a>
-		);
+		<a
+			href={href}
+			target="_blank"
+			rel="noreferrer"
+			aria-label={label}
+			className="dock-brand-button group relative block h-11 w-20"
+		>
+			<span className="dock-brand-icon absolute inset-0 z-10 flex items-center justify-center text-xl">
+				{children}
+			</span>
+		</a>
+	);
 }
diff --git a/tsconfig.json b/tsconfig.json
index bf964d4..4ea4ed2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,42 +1,34 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+	"compilerOptions": {
+		"target": "es2025",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "react-jsx",
+		"incremental": true,
+		"plugins": [
+			{
+				"name": "next"
+			}
+		],
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	},
+	"include": [
+		"next-env.d.ts",
+		"**/*.ts",
+		"**/*.tsx",
+		".next/types/**/*.ts",
+		".next/dev/types/**/*.ts"
+	],
+	"exclude": ["node_modules"]
 }