diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx
index 9d475a08c..255939270 100644
--- a/packages/website/src/components/DocContainer.tsx
+++ b/packages/website/src/components/DocContainer.tsx
@@ -121,7 +121,7 @@ export function DocContainer({
 				) : null}
 
 				{implementsTokens?.length ? (
-					<Group noWrap>
+					<Group pb="xs" noWrap>
 						<Title order={3} ml="xs">
 							Implements
 						</Title>
diff --git a/packages/website/src/components/MethodItem.tsx b/packages/website/src/components/MethodItem.tsx
index 32a26df37..93698a217 100644
--- a/packages/website/src/components/MethodItem.tsx
+++ b/packages/website/src/components/MethodItem.tsx
@@ -43,7 +43,7 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
 				<Stack>
 					<Box className={classes.outer} ml={matches ? 0 : -45}>
 						<MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
-							<ActionIcon component="a" href={`#${key}`} variant="transparent">
+							<ActionIcon component="a" href={`#${key}`} variant="transparent" color="dark">
 								<FiLink size={20} />
 							</ActionIcon>
 						</MediaQuery>
diff --git a/packages/website/src/components/SidebarItems.tsx b/packages/website/src/components/SidebarItems.tsx
index b25ed46cc..7396f0f21 100644
--- a/packages/website/src/components/SidebarItems.tsx
+++ b/packages/website/src/components/SidebarItems.tsx
@@ -67,7 +67,9 @@ function resolveIcon(item: keyof GroupedMembers) {
 }
 
 const useStyles = createStyles((theme) => ({
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 	link: {
+		...theme.fn.focusStyles(),
 		fontWeight: 500,
 		display: 'block',
 		width: 'unset',
diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx
index fc63311b7..a7d30461e 100644
--- a/packages/website/src/components/SidebarLayout.tsx
+++ b/packages/website/src/components/SidebarLayout.tsx
@@ -130,11 +130,18 @@ const useStyles = createStyles(
 				gap: 50,
 			},
 		},
+
+		link: { color: theme.colorScheme === 'dark' ? theme.white : theme.black },
 	}),
 );
 
 const packageMenuItems = PACKAGES.map((pkg) => (
-	<Menu.Item key={pkg} component={NextLink} href={`/docs/packages/${pkg}/main`}>
+	<Menu.Item
+		key={pkg}
+		component={NextLink}
+		href={`/docs/packages/${pkg}/main`}
+		sx={(theme) => ({ color: theme.colorScheme === 'dark' ? theme.white : theme.black })}
+	>
 		{pkg}
 	</Menu.Item>
 ));
@@ -173,7 +180,12 @@ export function SidebarLayout({
 	const versionMenuItems = useMemo(
 		() =>
 			versions?.map((item) => (
-				<Menu.Item key={item} component={NextLink} href={`/docs/packages/${packageName ?? 'builders'}/${item}`}>
+				<Menu.Item
+					key={item}
+					component={NextLink}
+					href={`/docs/packages/${packageName ?? 'builders'}/${item}`}
+					sx={(theme) => ({ color: theme.colorScheme === 'dark' ? theme.white : theme.black })}
+				>
 					{item}
 				</Menu.Item>
 			)) ?? [],
@@ -184,7 +196,9 @@ export function SidebarLayout({
 		() =>
 			asPathWithoutQueryAndAnchor.split('/').map((path, idx, original) => (
 				<Link key={idx} href={original.slice(0, idx + 1).join('/')} passHref>
-					<Anchor component="a">{path}</Anchor>
+					<Anchor component="a" sx={(theme) => ({ color: theme.colorScheme === 'dark' ? theme.white : theme.black })}>
+						{path}
+					</Anchor>
 				</Link>
 			)),
 		[asPathWithoutQueryAndAnchor],
@@ -358,12 +372,12 @@ export function SidebarLayout({
 									<Title order={4}>Community</Title>
 									<Stack spacing={0}>
 										<Link href="https://discord.gg/djs" passHref>
-											<Anchor component="a" target="_blank" rel="noopener noreferrer">
+											<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
 												Discord
 											</Anchor>
 										</Link>
 										<Link href="https://github.com/discordjs/discord.js/discussions" passHref>
-											<Anchor component="a" target="_blank" rel="noopener noreferrer">
+											<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
 												GitHub discussions
 											</Anchor>
 										</Link>
@@ -373,17 +387,17 @@ export function SidebarLayout({
 									<Title order={4}>Project</Title>
 									<Stack spacing={0}>
 										<Link href="https://github.com/discordjs/discord.js" passHref>
-											<Anchor component="a" target="_blank" rel="noopener noreferrer">
+											<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
 												discord.js
 											</Anchor>
 										</Link>
 										<Link href="https://discordjs.guide" passHref>
-											<Anchor component="a" target="_blank" rel="noopener noreferrer">
+											<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
 												discord.js guide
 											</Anchor>
 										</Link>
 										<Link href="https://discord-api-types.dev" passHref>
-											<Anchor component="a" target="_blank" rel="noopener noreferrer">
+											<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
 												discord-api-types
 											</Anchor>
 										</Link>
diff --git a/packages/website/src/components/TableOfContentItems.tsx b/packages/website/src/components/TableOfContentItems.tsx
index e0b65aeca..266e59e23 100644
--- a/packages/website/src/components/TableOfContentItems.tsx
+++ b/packages/website/src/components/TableOfContentItems.tsx
@@ -7,18 +7,18 @@ const useStyles = createStyles((theme) => ({
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 	link: {
 		...theme.fn.focusStyles(),
+		fontWeight: 500,
 		display: 'block',
 		textDecoration: 'none',
 		color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.colors.gray![7],
 		lineHeight: 1.2,
 		fontSize: theme.fontSizes.sm,
-		padding: theme.spacing.xs,
+		padding: 5,
 		paddingLeft: theme.spacing.md,
 		marginLeft: 14,
 		borderTopRightRadius: theme.radius.sm,
 		borderBottomRightRadius: theme.radius.sm,
 		borderLeft: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark![4] : theme.colors.gray![3]}`,
-		fontWeight: 500,
 
 		'&:hover': {
 			backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
@@ -48,7 +48,7 @@ export function TableOfContentItems({
 					</Group>
 				</Box>
 			)),
-		[properties],
+		[properties, colorScheme],
 	);
 
 	const methodItems = useMemo(
@@ -73,7 +73,7 @@ export function TableOfContentItems({
 					</Box>
 				);
 			}),
-		[methods],
+		[methods, colorScheme],
 	);
 
 	return (
diff --git a/packages/website/src/pages/_app.tsx b/packages/website/src/pages/_app.tsx
index 103435975..b66b00d57 100644
--- a/packages/website/src/pages/_app.tsx
+++ b/packages/website/src/pages/_app.tsx
@@ -93,16 +93,16 @@ export default function MyApp({ Component, pageProps }: AppProps) {
 						colorScheme,
 						colors: {
 							blurple: [
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
+								'#5865f2',
+								'#5865f2',
+								'#5865f2',
+								'#5865f2',
+								'#5865f2',
+								'#5865f2',
+								'#5865f2',
+								'#5865f2',
+								'#5865f2',
+								'#5865f2',
 							],
 						},
 						primaryColor: 'blurple',