diff --git a/packages/website/src/components/Section.tsx b/packages/website/src/components/Section.tsx
index 92e30cbee..b407fa20c 100644
--- a/packages/website/src/components/Section.tsx
+++ b/packages/website/src/components/Section.tsx
@@ -6,7 +6,7 @@ const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({
 	control: {
 		display: 'block',
 		width: '100%',
-		padding: `${theme.spacing.xs}px ${theme.spacing.xs}px`,
+		padding: theme.spacing.xs,
 		color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black,
 
 		'&:hover': {
diff --git a/packages/website/src/middleware.ts b/packages/website/src/middleware.ts
index bf7314d5c..98473a36c 100644
--- a/packages/website/src/middleware.ts
+++ b/packages/website/src/middleware.ts
@@ -6,5 +6,5 @@ export default function middleware(request: NextRequest) {
 }
 
 export const config = {
-	matcher: ['/docs', '/docs/:branch', '/docs/:branch/packages'],
+	matcher: ['/docs', '/docs/:branch'],
 };
diff --git a/packages/website/src/pages/docs/[version]/packages.tsx b/packages/website/src/pages/docs/[version]/packages.tsx
new file mode 100644
index 000000000..3fb73a15b
--- /dev/null
+++ b/packages/website/src/pages/docs/[version]/packages.tsx
@@ -0,0 +1,44 @@
+import { Container, UnstyledButton, createStyles, Group, ThemeIcon, Text, Stack } from '@mantine/core';
+import Link from 'next/link';
+import { VscArrowRight, VscPackage } from 'react-icons/vsc';
+
+const useStyles = createStyles((theme) => ({
+	control: {
+		padding: theme.spacing.xs,
+		color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black,
+
+		'&:hover': {
+			backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
+			color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+		},
+	},
+}));
+
+export default function PackagesRoute() {
+	const { classes } = useStyles();
+	const packages = ['builders', 'collection', 'proxy', 'rest', 'voice', 'ws'];
+
+	return (
+		<Container pt={96} size="xs">
+			<Stack sx={{ flexGrow: 1 }}>
+				{packages.map((pkg) => (
+					<Link key={pkg} href={`/docs/main/packages/${pkg}`} passHref>
+						<UnstyledButton className={classes.control} component="a">
+							<Group position="apart">
+								<Group>
+									<ThemeIcon size={30}>
+										<VscPackage />
+									</ThemeIcon>
+									<Text weight={600} size="md">
+										{pkg}
+									</Text>
+								</Group>
+								<VscArrowRight size={20} />
+							</Group>
+						</UnstyledButton>
+					</Link>
+				))}
+			</Stack>
+		</Container>
+	);
+}