diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx
index 2b332a1b8..596ba028e 100644
--- a/packages/website/src/components/DocContainer.tsx
+++ b/packages/website/src/components/DocContainer.tsx
@@ -53,7 +53,7 @@ export function DocContainer({
 					</Group>
 				</Title>
 
-				<Section title="Summary" icon={<VscListSelection />} padded dense={matches}>
+				<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
 					{summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>}
 				</Section>
 
@@ -97,7 +97,13 @@ export function DocContainer({
 
 				<Stack>
 					{typeParams?.length ? (
-						<Section title="Type Parameters" icon={<VscSymbolParameter />} padded dense={matches} defaultClosed>
+						<Section
+							title="Type Parameters"
+							icon={<VscSymbolParameter size={20} />}
+							padded
+							dense={matches}
+							defaultClosed
+						>
 							<TypeParamTable data={typeParams} />
 						</Section>
 					) : null}
diff --git a/packages/website/src/components/Section.tsx b/packages/website/src/components/Section.tsx
index 21894a3a4..92e30cbee 100644
--- a/packages/website/src/components/Section.tsx
+++ b/packages/website/src/components/Section.tsx
@@ -8,7 +8,6 @@ const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({
 		width: '100%',
 		padding: `${theme.spacing.xs}px ${theme.spacing.xs}px`,
 		color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black,
-		fontSize: theme.fontSizes.sm,
 
 		'&:hover': {
 			backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
@@ -45,11 +44,7 @@ export function Section({
 			<UnstyledButton className={classes.control} onClick={() => setOpened((o) => !o)}>
 				<Group position="apart">
 					<Group>
-						{icon ? (
-							<ThemeIcon variant="outline" size={30}>
-								{icon}
-							</ThemeIcon>
-						) : null}
+						{icon ? <ThemeIcon size={30}>{icon}</ThemeIcon> : null}
 						<Text weight={600} size="md">
 							{title}
 						</Text>
diff --git a/packages/website/src/components/Sections.tsx b/packages/website/src/components/Sections.tsx
index 4fbbfbc7c..7ed93534a 100644
--- a/packages/website/src/components/Sections.tsx
+++ b/packages/website/src/components/Sections.tsx
@@ -14,7 +14,7 @@ export function PropertiesSection({ data }: { data: ApiClassJSON['properties'] |
 	const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
 
 	return data.length ? (
-		<Section title="Properties" icon={<VscSymbolProperty />} padded dense={matches}>
+		<Section title="Properties" icon={<VscSymbolProperty size={20} />} padded dense={matches}>
 			<PropertyList data={data} />
 		</Section>
 	) : null;
@@ -24,7 +24,7 @@ export function MethodsSection({ data }: { data: ApiClassJSON['methods'] | ApiIn
 	const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
 
 	return data.length ? (
-		<Section title="Methods" icon={<VscSymbolMethod />} padded dense={matches}>
+		<Section title="Methods" icon={<VscSymbolMethod size={20} />} padded dense={matches}>
 			<MethodList data={data} />
 		</Section>
 	) : null;
@@ -34,7 +34,7 @@ export function ParametersSection({ data }: { data: ParameterDocumentation[] })
 	const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
 
 	return data.length ? (
-		<Section title="Parameters" icon={<VscSymbolConstant />} padded dense={matches}>
+		<Section title="Parameters" icon={<VscSymbolConstant size={20} />} padded dense={matches}>
 			<ParameterTable data={data} />
 		</Section>
 	) : null;
@@ -53,7 +53,7 @@ export function ConstructorSection({ data }: { data: ApiConstructorJSON }) {
 		}, '')})`;
 
 	return data.parameters.length ? (
-		<Section title="Constructor" icon={<VscSymbolMethod />} padded dense={matches}>
+		<Section title="Constructor" icon={<VscSymbolMethod size={20} />} padded dense={matches}>
 			<Stack id={`${data.name}`} className="scroll-mt-30" spacing="xs">
 				<Group>
 					<Stack>
diff --git a/packages/website/src/components/SidebarItems.tsx b/packages/website/src/components/SidebarItems.tsx
index dc980a806..b1e9913de 100644
--- a/packages/website/src/components/SidebarItems.tsx
+++ b/packages/website/src/components/SidebarItems.tsx
@@ -51,17 +51,17 @@ function groupMembers(members: Members): GroupedMembers {
 function resolveIcon(item: keyof GroupedMembers) {
 	switch (item) {
 		case 'Classes':
-			return <VscSymbolClass />;
+			return <VscSymbolClass size={20} />;
 		case 'Enums':
-			return <VscSymbolEnum />;
+			return <VscSymbolEnum size={20} />;
 		case 'Interfaces':
-			return <VscSymbolInterface />;
+			return <VscSymbolInterface size={20} />;
 		case 'Types':
-			return <VscSymbolField />;
+			return <VscSymbolField size={20} />;
 		case 'Variables':
-			return <VscSymbolVariable />;
+			return <VscSymbolVariable size={20} />;
 		case 'Functions':
-			return <VscSymbolMethod />;
+			return <VscSymbolMethod size={20} />;
 	}
 }
 
diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx
index ff2ec1e28..1dcd2ceb5 100644
--- a/packages/website/src/components/SidebarLayout.tsx
+++ b/packages/website/src/components/SidebarLayout.tsx
@@ -130,8 +130,8 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren
 											<UnstyledButton className={classes.control}>
 												<Group position="apart">
 													<Group>
-														<ThemeIcon variant="outline" size={30}>
-															<VscPackage />
+														<ThemeIcon size={30}>
+															<VscPackage size={20} />
 														</ThemeIcon>
 														<Text weight="600" size="md">
 															{packageName}
diff --git a/packages/website/src/components/TableOfContentItems.tsx b/packages/website/src/components/TableOfContentItems.tsx
index 341ffde60..c4a3d3e5a 100644
--- a/packages/website/src/components/TableOfContentItems.tsx
+++ b/packages/website/src/components/TableOfContentItems.tsx
@@ -1,5 +1,5 @@
-import { createStyles, Group, Text, Box, Stack } from '@mantine/core';
-import { VscListSelection } from 'react-icons/vsc';
+import { createStyles, Group, Text, Box, Stack, ThemeIcon } from '@mantine/core';
+import { VscListSelection, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';
 import type { ApiClassJSON, ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder';
 
 const useStyles = createStyles((theme) => ({
@@ -13,13 +13,14 @@ const useStyles = createStyles((theme) => ({
 		fontSize: theme.fontSizes.sm,
 		padding: theme.spacing.xs,
 		paddingLeft: theme.spacing.md,
-		marginLeft: 8,
+		marginLeft: 14,
 		borderTopRightRadius: theme.radius.sm,
 		borderBottomRightRadius: theme.radius.sm,
 		borderLeft: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark![4] : theme.colors.gray![3]}`,
 
 		'&:hover': {
 			backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
+			color: theme.colorScheme === 'dark' ? theme.white : theme.black,
 		},
 	},
 }));
@@ -64,20 +65,38 @@ export function TableOfContentItems({
 
 	return (
 		<Box>
-			<Group mb="md">
-				<VscListSelection size={20} />
-				<Text>Table of content</Text>
+			<Group mb="md" ml={2}>
+				<VscListSelection size={25} />
+				<Text>Table of contents</Text>
 			</Group>
-			<Stack>
+			<Stack spacing={0}>
 				{propertyItems.length ? (
 					<Box>
-						<Text>Properties</Text>
+						<Group>
+							<ThemeIcon size={30}>
+								<VscSymbolProperty size={20} />
+							</ThemeIcon>
+							<Box p="sm" pl={0}>
+								<Text weight={600} size="md">
+									Properties
+								</Text>
+							</Box>
+						</Group>
 						{propertyItems}
 					</Box>
 				) : null}
 				{methodItems.length ? (
 					<Box>
-						<Text>Methods</Text>
+						<Group spacing="xs">
+							<ThemeIcon size={30}>
+								<VscSymbolMethod size={20} />
+							</ThemeIcon>
+							<Box p="sm" pl={0}>
+								<Text weight={600} size="md">
+									Methods
+								</Text>
+							</Box>
+						</Group>
 						{methodItems}
 					</Box>
 				) : null}
diff --git a/packages/website/src/components/model/Enum.tsx b/packages/website/src/components/model/Enum.tsx
index 3dcaaff79..0dfe76184 100644
--- a/packages/website/src/components/model/Enum.tsx
+++ b/packages/website/src/components/model/Enum.tsx
@@ -11,7 +11,7 @@ export function Enum({ data }: { data: ApiEnumJSON }) {
 
 	return (
 		<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
-			<Section title="Members" icon={<VscSymbolEnumMember />} padded dense={matches}>
+			<Section title="Members" icon={<VscSymbolEnumMember size={20} />} padded dense={matches}>
 				<Stack>
 					{data.members.map((member) => (
 						<CodeListing
diff --git a/packages/website/src/pages/_app.tsx b/packages/website/src/pages/_app.tsx
index 41b2b810c..e31c806f2 100644
--- a/packages/website/src/pages/_app.tsx
+++ b/packages/website/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 import { ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core';
 import { useColorScheme } from '@mantine/hooks';
 import type { AppProps } from 'next/app';
+import Head from 'next/head';
 import { useEffect, useState } from 'react';
 import { RouterTransition } from '~/components/RouterTransition';
 import '../styles/unocss.css';
@@ -17,34 +18,40 @@ export default function MyApp({ Component, pageProps }: AppProps) {
 	}, [preferredColorScheme]);
 
 	return (
-		<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-			<MantineProvider
-				theme={{
-					fontFamily: 'Inter',
-					colorScheme,
-					colors: {
-						blurple: [
-							'#5865F2',
-							'#5865F2',
-							'#5865F2',
-							'#5865F2',
-							'#5865F2',
-							'#5865F2',
-							'#5865F2',
-							'#5865F2',
-							'#5865F2',
-							'#5865F2',
-						],
-					},
-					primaryColor: 'blurple',
-				}}
-				withCSSVariables
-				withNormalizeCSS
-				withGlobalStyles
-			>
-				<RouterTransition />
-				<Component {...pageProps} />
-			</MantineProvider>
-		</ColorSchemeProvider>
+		<>
+			<Head>
+				<title key="title">discord.js</title>
+				<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+			</Head>
+			<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
+				<MantineProvider
+					theme={{
+						fontFamily: 'Inter',
+						colorScheme,
+						colors: {
+							blurple: [
+								'#5865F2',
+								'#5865F2',
+								'#5865F2',
+								'#5865F2',
+								'#5865F2',
+								'#5865F2',
+								'#5865F2',
+								'#5865F2',
+								'#5865F2',
+								'#5865F2',
+							],
+						},
+						primaryColor: 'blurple',
+					}}
+					withCSSVariables
+					withNormalizeCSS
+					withGlobalStyles
+				>
+					<RouterTransition />
+					<Component {...pageProps} />
+				</MantineProvider>
+			</ColorSchemeProvider>
+		</>
 	);
 }
diff --git a/packages/website/src/pages/_document.tsx b/packages/website/src/pages/_document.tsx
index 9ed53f46c..452d086dd 100644
--- a/packages/website/src/pages/_document.tsx
+++ b/packages/website/src/pages/_document.tsx
@@ -15,9 +15,8 @@ export default class _Document extends Document {
 
 	public override render() {
 		return (
-			<Html>
+			<Html lang="en">
 				<Head>
-					<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
 					<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
 					<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
 					<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
diff --git a/packages/website/src/pages/docs/[...slug].tsx b/packages/website/src/pages/docs/[...slug].tsx
index 6cdef84c8..0c85706ae 100644
--- a/packages/website/src/pages/docs/[...slug].tsx
+++ b/packages/website/src/pages/docs/[...slug].tsx
@@ -1,8 +1,8 @@
-/* eslint-disable @typescript-eslint/no-throw-literal */
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
 import { Box } from '@mantine/core';
 import { ApiFunction } from '@microsoft/api-extractor-model';
+import Head from 'next/head';
 import type { GetStaticPaths, GetStaticProps } from 'next/types';
 import type {
 	ApiClassJSON,
@@ -150,7 +150,16 @@ export default function Slug(props: Partial<SidebarLayoutProps & { error?: strin
 		<Box sx={{ display: 'flex', maxWidth: '100%', height: '100%' }}>{props.error}</Box>
 	) : (
 		<MemberProvider member={props.data?.member}>
-			<SidebarLayout {...props}>{props.data?.member ? member(props.data.member) : null}</SidebarLayout>
+			<SidebarLayout {...props}>
+				{props.data?.member ? (
+					<>
+						<Head>
+							<title key="title">discord.js | {props.data.member.name}</title>
+						</Head>
+						{member(props.data.member)}
+					</>
+				) : null}
+			</SidebarLayout>
 		</MemberProvider>
 	);
 }
diff --git a/packages/website/src/util/icon.tsx b/packages/website/src/util/icon.tsx
index 26a614e61..a5945796e 100644
--- a/packages/website/src/util/icon.tsx
+++ b/packages/website/src/util/icon.tsx
@@ -1,13 +1,13 @@
 import { VscSymbolClass, VscSymbolMethod, VscSymbolEnum, VscSymbolInterface, VscSymbolVariable } from 'react-icons/vsc';
 
-export function generateIcon(kind: string, className?: string) {
+export function generateIcon(kind: string) {
 	const icons = {
-		Class: <VscSymbolClass className={className} />,
-		Method: <VscSymbolMethod className={className} />,
-		Function: <VscSymbolMethod className={className} />,
-		Enum: <VscSymbolEnum className={className} />,
-		Interface: <VscSymbolInterface className={className} />,
-		TypeAlias: <VscSymbolVariable className={className} />,
+		Class: <VscSymbolClass />,
+		Method: <VscSymbolMethod />,
+		Function: <VscSymbolMethod />,
+		Enum: <VscSymbolEnum />,
+		Interface: <VscSymbolInterface />,
+		TypeAlias: <VscSymbolVariable />,
 	};
 
 	return icons[kind as keyof typeof icons];