diff --git a/apps/website/next.config.js b/apps/website/next.config.js
index c6635e113..86347ffb7 100644
--- a/apps/website/next.config.js
+++ b/apps/website/next.config.js
@@ -1,4 +1,3 @@
-import { fileURLToPath } from 'node:url';
 import bundleAnalyzer from '@next/bundle-analyzer';
 
 const withBundleAnalyzer = bundleAnalyzer({
@@ -23,6 +22,11 @@ export default withBundleAnalyzer({
 				destination: '/logo.svg',
 				permanent: true,
 			},
+			{
+				source: '/guide/:path*',
+				destination: 'https://next.discordjs.guide/guide/:path*',
+				permanent: true,
+			},
 		];
 	},
 });
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index cb3f30398..f076e3b96 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -3,19 +3,19 @@ import Image from 'next/image';
 import Link from 'next/link';
 import vercelLogo from '~/assets/powered-by-vercel.svg';
 import { Banner } from '~/components/Banner';
-import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
-import { DESCRIPTION, CODE_EXAMPLE } from '~/util/constants';
+import { InstallButton } from '~/components/InstallButton';
+import { DESCRIPTION } from '~/util/constants';
 
 export default function Page() {
 	return (
 		<div className="min-h-screen">
 			<Banner />
-			<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 px-8 py-16 lg:min-h-[calc(100vh_-_40px)] lg:place-content-center lg:py-10">
+			<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-24 px-8 pb-16 pt-12 lg:min-h-[calc(100vh_-_40px)] lg:place-content-center lg:py-10">
 				<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
-					<div className="max-w-lg flex flex-col gap-3 lg:mr-8">
-						<h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">
+					<div className="flex flex-col place-items-center gap-8 text-center">
+						<h1 className="text-3xl font-black leading-tight sm:text-7xl sm:leading-tight">
 							The <span className="relative rounded bg-blurple px-3 py-1 text-white">most popular</span> way to build
-							Discord <br /> bots.
+							Discord bots.
 						</h1>
 						<p className="my-6 leading-normal text-neutral-700 dark:text-neutral-300">{DESCRIPTION}</p>
 						<div className="flex flex-row gap-4">
@@ -25,8 +25,14 @@ export default function Page() {
 							>
 								Docs
 							</Link>
+							{/* <Link
+								className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
+								href="/guide"
+							>
+								Guide
+							</Link> */}
 							<a
-								className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-none active:translate-y-px dark:border-dark-100 active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
+								className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-none transition duration-200 active:translate-y-px dark:border-dark-100 hover:border-black active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
 								href="https://discordjs.guide"
 								rel="noopener noreferrer"
 								target="_blank"
@@ -34,7 +40,7 @@ export default function Page() {
 								Guide <FiExternalLink />
 							</a>
 							<a
-								className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-none active:translate-y-px dark:border-dark-100 active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
+								className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-none transition duration-200 active:translate-y-px dark:border-dark-100 hover:border-black active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
 								href="https://github.com/discordjs/discord.js"
 								rel="external noopener noreferrer"
 								target="_blank"
@@ -42,31 +48,26 @@ export default function Page() {
 								GitHub <FiExternalLink />
 							</a>
 						</div>
-					</div>
-					<div className="max-w-xs sm:max-w-2xl">
-						{/* @ts-expect-error async component */}
-						<SyntaxHighlighter code={CODE_EXAMPLE} />
+						<InstallButton />
 					</div>
 				</div>
-				<div className="flex flex-row place-content-center">
-					<a
-						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
-						rel="external noopener noreferrer"
-						target="_blank"
-						title="Vercel"
-					>
-						<Image
-							alt="Vercel"
-							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
-							height={44}
-							placeholder="blur"
-							priority
-							src={vercelLogo}
-							width={212}
-						/>
-					</a>
-				</div>
+				<a
+					className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+					href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+					rel="external noopener noreferrer"
+					target="_blank"
+					title="Vercel"
+				>
+					<Image
+						alt="Vercel"
+						blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+						height={44}
+						placeholder="blur"
+						priority
+						src={vercelLogo}
+						width={212}
+					/>
+				</a>
 			</div>
 		</div>
 	);
diff --git a/apps/website/src/components/InstallButton.tsx b/apps/website/src/components/InstallButton.tsx
new file mode 100644
index 000000000..5e82ed9dc
--- /dev/null
+++ b/apps/website/src/components/InstallButton.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
+import { FiCopy } from '@react-icons/all-files/fi/FiCopy';
+import { useEffect, useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
+
+export function InstallButton() {
+	const [interacted, setInteracted] = useState(false);
+	const [state, copyToClipboard] = useCopyToClipboard();
+
+	useEffect(() => {
+		const timer = setTimeout(() => setInteracted(false), 2_000);
+		return () => clearTimeout(timer);
+	}, [interacted]);
+
+	return (
+		<button
+			className="cursor-copy select-none bg-transparent px-4 py-2 text-sm text-dark-50"
+			onClick={() => {
+				setInteracted(true);
+				copyToClipboard('npm install discord.js');
+			}}
+			type="button"
+		>
+			<span className="font-semibold text-blurple">{'>'}</span> npm install discord.js{' '}
+			{state.value && interacted ? (
+				<FiCheck className="ml-1 inline-block text-green-500" />
+			) : (
+				<FiCopy className="ml-1 inline-block" />
+			)}
+		</button>
+	);
+}
diff --git a/apps/website/src/util/constants.ts b/apps/website/src/util/constants.ts
index ce5341544..cedd0d7ec 100644
--- a/apps/website/src/util/constants.ts
+++ b/apps/website/src/util/constants.ts
@@ -21,23 +21,5 @@ export const METHOD_SEPARATOR = '#';
 export const DESCRIPTION =
 	"discord.js is a powerful Node.js module that allows you to interact with the Discord API very easily. It takes a much more object-oriented approach than most other JS Discord libraries, making your bot's code significantly tidier and easier to comprehend.";
 
-export const CODE_EXAMPLE = `import { Client, GatewayIntentBits } from 'discord.js';
-
-const client = new Client({ intents: [GatewayIntentBits.Guilds] });
-
-client.on('ready', () => {
-	console.log(\`Logged in as \${client.user.tag}!\`);
-});
-
-client.on('interactionCreate', async (interaction) => {
-	if (!interaction.isChatInputCommand()) return;
-
-	if (interaction.commandName === 'ping') {
-		await interaction.reply('Pong!');
-	}
-});
-
-await client.login(TOKEN);`;
-
 export const DISCORD_API_TYPES_VERSION = 'v10';
 export const DISCORD_API_TYPES_DOCS_URL = `https://discord-api-types.dev/api/discord-api-types-${DISCORD_API_TYPES_VERSION}`;