diff --git a/gatsby-config.js b/gatsby-config.js
index 7531f6e91..f6631c889 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -47,19 +47,6 @@ module.exports = {
               disableBgImageOnAlpha: true,
             },
           },
-          {
-            resolve: 'gatsby-remark-prismjs',
-            options: {
-              // Class prefix for <pre> tags containing syntax highlighting;
-              // defaults to 'language-' (eg <pre class="language-js">).
-              // If your site loads Prism into the browser at runtime,
-              // (eg for use with libraries like react-live),
-              // you may use this to prevent Prism from re-processing syntax.
-              // This is an uncommon use-case though;
-              // If you're unsure, it's best to use the default value.
-              classPrefix: 'language-',
-            },
-          },
           {
             resolve: 'gatsby-remark-video',
             options: {
@@ -73,6 +60,19 @@ module.exports = {
               loop: true,
             },
           },
+          {
+            resolve: 'gatsby-remark-prismjs',
+            options: {
+              // Class prefix for <pre> tags containing syntax highlighting;
+              // defaults to 'language-' (eg <pre class="language-js">).
+              // If your site loads Prism into the browser at runtime,
+              // (eg for use with libraries like react-live),
+              // you may use this to prevent Prism from re-processing syntax.
+              // This is an uncommon use-case though;
+              // If you're unsure, it's best to use the default value.
+              classPrefix: 'language-',
+            },
+          },
           'gatsby-remark-responsive-iframe',
         ],
       },
diff --git a/gatsby-node.js b/gatsby-node.js
index 295b0fec7..368fbe589 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -3,8 +3,9 @@ const Path = require('path');
 
 const { slugify } = require('./src/utils/slugify');
 
-const BLOG_POSTS_PER_PAGE = 9;
+const DRAFT_FILTER = process.env.NODE_ENV === 'production' ? [false] : [true, false];
 
+const BLOG_POSTS_PER_PAGE = 9;
 const slugifyCategory = (item) => (item === '*' ? 'blog/' : `blog/categories/${slugify(item)}/`);
 
 // Create Blog Posts
@@ -22,6 +23,9 @@ async function createBlogPosts({ graphql, actions }) {
           frontmatter {
             path
           }
+          fields {
+            draft
+          }
         }
       }
     }
@@ -29,7 +33,7 @@ async function createBlogPosts({ graphql, actions }) {
 
   blogPosts.forEach((file) => {
     // skip page creation if post has `draft` flag
-    if (process.env.NODE_ENV === 'production' && file.frontmatter.draft) {
+    if (process.env.NODE_ENV === 'production' && file.fields.draft) {
       return;
     }
 
@@ -88,11 +92,15 @@ async function createBlogPages({ graphql, actions, reporter }) {
     categories.map(async (category) =>
       graphql(
         `
-          query CategoryPostsQuery($tag: String!) {
+          query CategoryPostsQuery($tag: String!, $draftFilter: [Boolean]!) {
             allMdx(
               filter: {
                 fileAbsolutePath: { regex: "/posts/" }
-                fields: { isFeatured: { eq: false }, categories: { glob: $tag } }
+                fields: {
+                  isFeatured: { eq: false }
+                  categories: { glob: $tag }
+                  draft: { in: $draftFilter }
+                }
               }
               limit: 1000
             ) {
@@ -104,7 +112,7 @@ async function createBlogPages({ graphql, actions, reporter }) {
             }
           }
         `,
-        { tag: category }
+        { tag: category, draftFilter: DRAFT_FILTER }
       ).then((result) => {
         if (result.errors) throw result.errors;
         const posts = result.data.allMdx.edges;
@@ -124,8 +132,7 @@ async function createBlogPages({ graphql, actions, reporter }) {
               currentCategory: category,
               categories,
               // get all posts with draft: 'false' if NODE_ENV is production, otherwise render them all
-              draftFilter:
-                process.env.NODE_ENV === 'production' ? Array.of(false) : Array.of(true, false),
+              draftFilter: DRAFT_FILTER,
               canonicalUrl: `${process.env.GATSBY_DEFAULT_SITE_URL}/${path}`,
               slug: path,
             },
diff --git a/src/components/pages/blog-post/content/content.jsx b/src/components/pages/blog-post/content/content.jsx
index 3f237a28c..fdfacae29 100644
--- a/src/components/pages/blog-post/content/content.jsx
+++ b/src/components/pages/blog-post/content/content.jsx
@@ -1,7 +1,7 @@
 import { MDXProvider } from '@mdx-js/react';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import BlogAuthor from 'components/shared/blog-author';
 import Container from 'components/shared/container';
@@ -9,8 +9,10 @@ import Heading from 'components/shared/heading';
 
 import SocialShare from './social-share';
 
+// eslint-disable-next-line react/prop-types
 const Wrapper = ({ children }) => <div className="prose md:prose-lg !max-w-none">{children}</div>;
-const components = { wrapper: Wrapper, BlogAuthor };
+// eslint-disable-next-line react/jsx-no-useless-fragment
+const components = { wrapper: Wrapper, BlogAuthor, undefined: (props) => <Fragment {...props} /> };
 const Content = ({ date, title, summary, html, path, tags }) => {
   const postUrl = `${process.env.GATSBY_DEFAULT_SITE_URL}${path}`;
   return (
diff --git a/src/components/pages/blog/featured-posts/featured-posts.jsx b/src/components/pages/blog/featured-posts/featured-posts.jsx
index f69f99cbd..f2e5b8f47 100644
--- a/src/components/pages/blog/featured-posts/featured-posts.jsx
+++ b/src/components/pages/blog/featured-posts/featured-posts.jsx
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import Container from 'components/shared/container';
+import PopularPosts from 'components/shared/popular-posts';
 
 import FeaturedStory from './featured-story';
-import PopularPosts from './popular-posts';
 
 const FeaturedPosts = ({ featuredStory }) => (
   <section className="mt-6 md:mt-10 lg:mt-16">
@@ -14,7 +14,7 @@ const FeaturedPosts = ({ featuredStory }) => (
         {...featuredStory.frontmatter}
         {...featuredStory.fields}
       />
-      <PopularPosts className="flex flex-col col-span-full" />
+      <PopularPosts className="flex flex-col col-span-full" titleTheme="gray" />
     </Container>
   </section>
 );
diff --git a/src/components/pages/blog/featured-posts/popular-posts/index.js b/src/components/pages/blog/featured-posts/popular-posts/index.js
deleted file mode 100644
index 5f359253f..000000000
--- a/src/components/pages/blog/featured-posts/popular-posts/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './popular-posts';
diff --git a/src/components/pages/blog/featured-posts/popular-posts/popular-posts.jsx b/src/components/pages/blog/featured-posts/popular-posts/popular-posts.jsx
deleted file mode 100644
index 2cc50f1c5..000000000
--- a/src/components/pages/blog/featured-posts/popular-posts/popular-posts.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { graphql, useStaticQuery } from 'gatsby';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import BlogPostCard from 'components/shared/blog-post-card';
-import Heading from 'components/shared/heading';
-
-const blockTitle = 'Popular posts';
-
-const PopularPosts = ({ className }) => {
-  const {
-    allPopularPosts: { posts },
-  } = useStaticQuery(graphql`
-    query BlogPagePopularPosts {
-      allPopularPosts: allMdx(
-        filter: {
-          fileAbsolutePath: { regex: "/posts/" }
-          fields: { isPopular: { eq: true }, isFeatured: { eq: false } }
-        }
-        limit: 3
-        sort: { order: DESC, fields: fileAbsolutePath }
-      ) {
-        posts: nodes {
-          fields {
-            externalUrl
-            ogImageUrl
-          }
-          frontmatter {
-            path
-            date(locale: "en", formatString: "MMM DD, yyyy")
-            categories
-            title
-            ogSummary
-            ogImage {
-              childImageSharp {
-                gatsbyImageData(width: 550)
-              }
-            }
-          }
-          fileAbsolutePath
-        }
-      }
-    }
-  `);
-  return (
-    <div className={className}>
-      <Heading tag="h2" theme="gray" size="xxs">
-        {blockTitle}
-      </Heading>
-      <div className="grid gap-6 mt-6 md:mt-8 sm:grid-cols-2 md:gap-8 lg:grid-cols-3">
-        {posts.map(({ frontmatter, fields }, index) => (
-          <BlogPostCard {...frontmatter} {...fields} key={index} />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-PopularPosts.propTypes = {
-  className: PropTypes.string,
-};
-
-PopularPosts.defaultProps = {
-  className: null,
-};
-
-export default PopularPosts;
diff --git a/src/components/pages/blog/posts-board/posts-board.jsx b/src/components/pages/blog/posts-board/posts-board.jsx
index 0d65cb851..625e236cc 100644
--- a/src/components/pages/blog/posts-board/posts-board.jsx
+++ b/src/components/pages/blog/posts-board/posts-board.jsx
@@ -45,7 +45,7 @@ PostsBoard.propTypes = {
   posts: PropTypes.arrayOf(
     PropTypes.shape({
       frontmatter: PropTypes.shape({
-        path: PropTypes.string.isRequired,
+        path: PropTypes.string,
         ogImage: PropTypes.shape({
           childImageSharp: PropTypes.shape({
             gatsbyImageData: PropTypes.shape(),
diff --git a/src/components/pages/blog-post/popular-posts/index.js b/src/components/shared/popular-posts/index.js
similarity index 100%
rename from src/components/pages/blog-post/popular-posts/index.js
rename to src/components/shared/popular-posts/index.js
diff --git a/src/components/pages/blog-post/popular-posts/popular-posts.jsx b/src/components/shared/popular-posts/popular-posts.jsx
similarity index 72%
rename from src/components/pages/blog-post/popular-posts/popular-posts.jsx
rename to src/components/shared/popular-posts/popular-posts.jsx
index 8d49c351d..0cd8d02f8 100644
--- a/src/components/pages/blog-post/popular-posts/popular-posts.jsx
+++ b/src/components/shared/popular-posts/popular-posts.jsx
@@ -1,17 +1,18 @@
 import { graphql, useStaticQuery } from 'gatsby';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import BlogPostCard from 'components/shared/blog-post-card';
 import Container from 'components/shared/container';
 import Heading from 'components/shared/heading';
 
-const title = 'Popular posts';
+const blockTitle = 'Popular posts';
 
-const PopularPosts = () => {
+const PopularPosts = ({ className, titleTheme }) => {
   const {
     allPopularPosts: { posts },
   } = useStaticQuery(graphql`
-    query PopularPosts {
+    query BlogPagePopularPosts {
       allPopularPosts: allMdx(
         filter: {
           fileAbsolutePath: { regex: "/posts/" }
@@ -43,17 +44,29 @@ const PopularPosts = () => {
     }
   `);
   return (
-    <section className="mt-10 md:mt-20 lg:mt-28">
+    <div className={className}>
       <Container>
-        <Heading tag="h2">{title}</Heading>
+        <Heading tag="h2" theme={titleTheme} size={titleTheme === 'gray' ? 'xxs' : 'md'}>
+          {blockTitle}
+        </Heading>
         <div className="grid gap-6 mt-6 md:mt-8 sm:grid-cols-2 md:gap-8 lg:grid-cols-3">
           {posts.map(({ frontmatter, fields }, index) => (
             <BlogPostCard {...frontmatter} {...fields} key={index} />
           ))}
         </div>
       </Container>
-    </section>
+    </div>
   );
 };
 
+PopularPosts.propTypes = {
+  className: PropTypes.string,
+  titleTheme: PropTypes.oneOf(['gray']),
+};
+
+PopularPosts.defaultProps = {
+  className: null,
+  titleTheme: null,
+};
+
 export default PopularPosts;
diff --git a/src/templates/blog-post.jsx b/src/templates/blog-post.jsx
index 388b32f57..c570e8033 100644
--- a/src/templates/blog-post.jsx
+++ b/src/templates/blog-post.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 import 'prismjs/themes/prism.css';
 
 import Content from 'components/pages/blog-post/content';
-import PopularPosts from 'components/pages/blog-post/popular-posts';
+import PopularPosts from 'components/shared/popular-posts';
 
 import MainLayout from '../layouts/main';
 
@@ -30,7 +30,7 @@ const BlogPostPage = (props) => {
   return (
     <MainLayout showBanner={shouldShowBanner} pageMetadata={seoMetadata}>
       <Content path={path} html={html} date={date} title={title} tags={tags} summary={ogSummary} />
-      <PopularPosts />
+      <PopularPosts className="mt-10 md:mt-20 lg:mt-28" />
     </MainLayout>
   );
 };