diff --git a/src/components/blog-breadcrumbs.jsx b/src/components/blog-breadcrumbs.jsx
new file mode 100644
index 00000000..989827a7
--- /dev/null
+++ b/src/components/blog-breadcrumbs.jsx
@@ -0,0 +1,24 @@
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import Link from "@/components/link";
+
+export default function BlogBreadcrumbs({ currentPostTitle }) {
+	return (
+		<div className="mt-4 mb-7 md:mt-2 md:mb-10">
+			<div className="flex flex-wrap items-center gap-2 text-sm">
+				<Link
+					className="font-normal text-gray-400 no-underline transition duration-200 ease-in hover:text-white focus:text-white"
+					href="/blog"
+					noDefaultStyles
+					aria-label="Blog"
+				>
+					<span>Blog</span>
+					<span>
+						<ChevronRightIcon className="inline h-5 w-10 pl-4 align-text-top" />
+					</span>
+				</Link>
+
+				<span>{currentPostTitle}</span>
+			</div>
+		</div>
+	);
+}
diff --git a/src/pages/blog/[slug].jsx b/src/pages/blog/[slug].jsx
index 4ef422b5..1c2fef7f 100644
--- a/src/pages/blog/[slug].jsx
+++ b/src/pages/blog/[slug].jsx
@@ -1,6 +1,7 @@
 import { gql, useQuery } from "@apollo/client";
 import { WordPressBlocksViewer } from "@faustwp/blocks";
 import { flatListToHierarchical, getNextStaticProps } from "@faustwp/core";
+import BlogBreadcrumbs from "@/components/blog-breadcrumbs";
 import Seo from "@/components/seo";
 import blocks from "@/wp-blocks";
 
@@ -22,12 +23,17 @@ export default function SinglePost(properties) {
 	});
 
 	return (
-		<div className="prose prose-lg prose-invert container mx-auto px-4 py-20">
+		<div
+			id="main-content"
+			className="prose prose-lg prose-invert container mx-auto px-4 py-8"
+		>
 			<Seo
 				title={title}
 				url={uri}
 				description={excerpt.replaceAll(/<\/?\S+>/gm, "")}
 			/>
+
+			<BlogBreadcrumbs currentPostTitle={title} />
 			<div className="py-4">
 				<h1 className="mb-4">{title}</h1>
 				<p className="mb-8 text-sm text-gray-400">
diff --git a/src/pages/blog/index.jsx b/src/pages/blog/index.jsx
index 607a0a37..53e3ae62 100644
--- a/src/pages/blog/index.jsx
+++ b/src/pages/blog/index.jsx
@@ -53,7 +53,7 @@ export default function BlogIndex() {
 
 	if (loading && !data)
 		return (
-			<div className="container-main flex justify-center">
+			<div className="container-main flex justify-center py-20">
 				Loading <ArrowPathIcon className="ml-2 h-5 w-5 animate-spin" />
 			</div>
 		);
@@ -123,7 +123,7 @@ export default function BlogIndex() {
 				<div className="mt-8 flex justify-center">
 					<button
 						type="button"
-						className="flex items-center rounded-sm bg-purple-700 px-4 py-2 text-white transition ease-in-out hover:bg-purple-800"
+						className="flex cursor-pointer items-center rounded-sm bg-purple-700 px-4 py-2 text-white transition ease-in-out hover:bg-purple-800"
 						onClick={loadMorePosts}
 						disabled={loadingMore}
 					>