diff --git a/src/pages/categories/[category]/[...page].astro b/src/pages/categories/[category]/[...page].astro
new file mode 100644
index 0000000..e8990b7
--- /dev/null
+++ b/src/pages/categories/[category]/[...page].astro
@@ -0,0 +1,74 @@
+---
+import type { CollectionEntry } from "astro:content";
+import Pagination from "@/components/Paginator.astro";
+import PostPreview from "@/components/blog/PostPreview.astro";
+import { getAllPosts, getUniqueCategories } from "@/data/post";
+import PageLayout from "@/layouts/Base.astro";
+import { collectionDateSort } from "@/utils/date";
+import type { GetStaticPaths, Page } from "astro";
+
+export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
+	const allPosts = await getAllPosts();
+	const sortedPosts = allPosts.sort(collectionDateSort);
+	const uniqueCategories = getUniqueCategories(sortedPosts);
+
+	return uniqueCategories.flatMap((category) => {
+		const filterPosts = sortedPosts.filter((post) => post.data.category === category);
+		return paginate(filterPosts, {
+			pageSize: 20,
+			params: { category },
+		});
+	});
+};
+
+interface Props {
+	page: Page<CollectionEntry<"post">>;
+}
+
+const { page } = Astro.props;
+const { category } = Astro.params;
+
+const meta = {
+	description: `View all posts with the category - ${category}`,
+	title: `Category: ${category}`,
+};
+
+const paginationProps = {
+	...(page.url.prev && {
+		prevUrl: {
+			text: "← Previous Categories",
+			url: page.url.prev,
+		},
+	}),
+	...(page.url.next && {
+		nextUrl: {
+			text: "Next Categories →",
+			url: page.url.next,
+		},
+	}),
+};
+---
+
+<PageLayout meta={meta}>
+	<div class="mb-6 flex items-center">
+		<h1 class="sr-only">Posts with the category {category}</h1>
+		<a class="title text-accent" href="/categories/"
+			><span class="sr-only">All {" "}</span>Categories</a
+		>
+		<span aria-hidden="true" class="ms-2 me-3 text-xl">→</span>
+		<span aria-hidden="true" class="text-xl">#{category}</span>
+	</div>
+	<section aria-labelledby={`categories-${category}`}>
+		<h2 id={`categories-${category}`} class="sr-only">Post List</h2>
+		<ul class="space-y-4">
+			{
+				page.data.map((p) => (
+					<li class="grid gap-2 sm:grid-cols-[auto_1fr]">
+						<PostPreview as="h2" post={p} />
+					</li>
+				))
+			}
+		</ul>
+		<Pagination {...paginationProps} />
+	</section>
+</PageLayout>
diff --git a/src/pages/categories/index.astro b/src/pages/categories/index.astro
new file mode 100644
index 0000000..885a65f
--- /dev/null
+++ b/src/pages/categories/index.astro
@@ -0,0 +1,35 @@
+---
+import { getAllPosts, getUniqueCategoriesWithCount } from "@/data/post";
+import PageLayout from "@/layouts/Base.astro";
+
+const allPosts = await getAllPosts();
+const allCategories = getUniqueCategoriesWithCount(allPosts);
+
+const meta = {
+	description: "A list of all the categories I've written about in my posts",
+	title: "All Categories",
+};
+---
+
+<PageLayout meta={meta}>
+	<h1 class="title mb-6">Categories</h1>
+	<ul class="space-y-4">
+		{
+			allCategories.map(([item, val]) => (
+				<li class="flex items-center gap-x-2">
+					<a
+						class="cactus-link inline-block"
+						data-astro-prefetch
+						href={`/categories/${item}/`}
+						title={`View posts with the category: ${item}`}
+					>
+						&#35;{item}
+					</a>
+					<span class="inline-block">
+						- {val} Post{val > 1 && "s"}
+					</span>
+				</li>
+			))
+		}
+	</ul>
+</PageLayout>
diff --git a/src/pages/category/[category]/[...page].astro b/src/pages/category/[category]/[...page].astro
deleted file mode 100644
index 0fa2b0d..0000000
--- a/src/pages/category/[category]/[...page].astro
+++ /dev/null
@@ -1,23 +0,0 @@
----
-import { getAllPosts, getUniqueCategories } from "@/data/post";
-import { collectionDateSort } from "@/utils/date";
-import type { GetStaticPaths } from "astro";
-
-export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
-	const allPosts = await getAllPosts();
-	const sortedPosts = allPosts.sort(collectionDateSort);
-	const uniqueCategories = getUniqueCategories(sortedPosts);
-
-	return uniqueCategories.flatMap((category) => {
-		const filterPosts = sortedPosts.filter((post) => post.data.category === category);
-		return paginate(filterPosts, {
-			pageSize: 20,
-			params: { category },
-		});
-	});
-};
-
-const currentPath = Astro.url.pathname;
-const newPath = currentPath.replace("/category/", "/categories/");
-return Astro.redirect(newPath);
----
diff --git a/src/pages/category/index.astro b/src/pages/category/index.astro
deleted file mode 100644
index ec0cff5..0000000
--- a/src/pages/category/index.astro
+++ /dev/null
@@ -1,3 +0,0 @@
----
-return Astro.redirect("/categories");
----