diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx
index c7a47ab5a..84bd1a8bb 100644
--- a/packages/website/src/components/SidebarLayout.tsx
+++ b/packages/website/src/components/SidebarLayout.tsx
@@ -72,18 +72,33 @@ export function SidebarLayout({
 		setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0]?.split(':')[0] ?? '');
 	}, [router.asPath]);
 
-	const packageMenuItems = PACKAGES.map((pkg) => (
-		<Link key={pkg} href={`/docs/packages/${pkg}/main`} passHref prefetch={false}>
-			<MenuItem
-				className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
-				as="a"
-				state={packageMenu}
-				onClick={() => packageMenu.setOpen(false)}
-			>
-				{pkg}
-			</MenuItem>
-		</Link>
-	));
+	const packageMenuItems = useMemo(
+		() => [
+			<a key="discord.js" href="https://discord.js.org/#/docs/discord.js">
+				<MenuItem
+					className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
+					state={packageMenu}
+					onClick={() => packageMenu.setOpen(false)}
+				>
+					discord.js
+				</MenuItem>
+			</a>,
+			...PACKAGES.map((pkg) => (
+				<Link key={pkg} href={`/docs/packages/${pkg}/main`} passHref prefetch={false}>
+					<MenuItem
+						className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
+						as="a"
+						state={packageMenu}
+						onClick={() => packageMenu.setOpen(false)}
+					>
+						{pkg}
+					</MenuItem>
+				</Link>
+			)),
+		],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
+	);
 
 	const versionMenuItems = useMemo(
 		() =>
diff --git a/packages/website/src/middleware.ts b/packages/website/src/middleware.ts
index 4139000e9..7bee8f55e 100644
--- a/packages/website/src/middleware.ts
+++ b/packages/website/src/middleware.ts
@@ -2,6 +2,10 @@ import { NextResponse, type NextRequest } from 'next/server';
 import { PACKAGES } from './util/constants';
 
 export default async function middleware(request: NextRequest) {
+	if (request.nextUrl.pathname.includes('discord.js')) {
+		return NextResponse.redirect('https://discord.js.org/#/docs/discord.js');
+	}
+
 	if (PACKAGES.some((pkg) => request.nextUrl.pathname.includes(pkg))) {
 		const packageName = /\/docs\/packages\/([^/]+)\/.*/.exec(request.nextUrl.pathname)?.[1] ?? 'builders';
 		const res = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`);
@@ -17,5 +21,5 @@ export default async function middleware(request: NextRequest) {
 }
 
 export const config = {
-	matcher: ['/docs', '/docs/packages/:package/stable/:member*'],
+	matcher: ['/docs', '/docs/packages/discord.js(.*)?', '/docs/packages/:package/stable/:member*'],
 };
diff --git a/packages/website/src/pages/docs/packages/index.tsx b/packages/website/src/pages/docs/packages/index.tsx
index 459facc74..991a94cd8 100644
--- a/packages/website/src/pages/docs/packages/index.tsx
+++ b/packages/website/src/pages/docs/packages/index.tsx
@@ -62,6 +62,20 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
 		<div className="min-w-xs sm:w-md mx-auto flex h-full flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
 			<div className="flex grow flex-col place-content-center gap-4">
 				<h1 className="text-2xl font-semibold">Select a package:</h1>
+				<a
+					className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
+					href="https://discord.js.org/#/docs/discord.js"
+				>
+					<div className="flex grow flex-row place-content-between place-items-center gap-4">
+						<div className="flex grow flex-row place-content-between place-items-center gap-4">
+							<div className="flex flex-row place-content-between place-items-center gap-4">
+								<VscPackage size={25} />
+								<h2 className="font-semibold">discord.js</h2>
+							</div>
+						</div>
+						<VscArrowRight size={20} />
+					</div>
+				</a>
 				{PACKAGES.map((pkg) => (
 					<Link key={pkg} href={`/docs/packages/${pkg}/${findLatestVersion(pkg)?.version ?? 'main'}`} prefetch={false}>
 						<a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white">