diff --git a/package-lock.json b/package-lock.json
index 380a94d93a..2c785a66f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20050,6 +20050,12 @@
         "react-dom": "^18.0.0 || ^0.0.0"
       }
     },
+    "node_modules/gatsby-plugin-mdx-source-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-mdx-source-name/-/gatsby-plugin-mdx-source-name-1.0.1.tgz",
+      "integrity": "sha512-D8DAOI84ZoWmx3c6BFYuKEnQc+Y1IU+VMhTJZbIOcKbQaoROKx66TkvjLbdHSlrpQ6Skozmi+b6NNrwIyZunzw==",
+      "license": "MIT"
+    },
     "node_modules/gatsby-plugin-page-creator": {
       "version": "5.14.0",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-5.14.0.tgz",
@@ -47623,6 +47629,7 @@
         "gatsby": "^5.14",
         "gatsby-plugin-manifest": "^5.14",
         "gatsby-plugin-mdx": "^5.14",
+        "gatsby-plugin-mdx-source-name": "^1.0.1",
         "gatsby-plugin-react-axe": "^0.5.0",
         "gatsby-plugin-react-helmet": "^6.14",
         "gatsby-plugin-sass": "^6.14",
diff --git a/www/gatsby-config.mjs b/www/gatsby-config.mjs
index aecc6a7ce9..9e5aff9166 100644
--- a/www/gatsby-config.mjs
+++ b/www/gatsby-config.mjs
@@ -41,6 +41,7 @@ const plugins = [
     },
   },
   'gatsby-plugin-react-helmet',
+  'gatsby-plugin-mdx-source-name',
   {
     resolve: 'gatsby-plugin-manifest',
     options: {
@@ -108,7 +109,7 @@ const plugins = [
     resolve: 'gatsby-plugin-page-creator',
     options: {
       path: `${__dirname}/src/pages`,
-      ignore: ['insights.tsx'],
+      ignore: ['insights.tsx', '**/*.(md|mdx)'],
     },
   },
 ];
diff --git a/www/package.json b/www/package.json
index 65eb66120a..9fa92545b3 100644
--- a/www/package.json
+++ b/www/package.json
@@ -16,6 +16,7 @@
     "gatsby": "^5.14",
     "gatsby-plugin-manifest": "^5.14",
     "gatsby-plugin-mdx": "^5.14",
+    "gatsby-plugin-mdx-source-name": "^1.0.1",
     "gatsby-plugin-react-axe": "^0.5.0",
     "gatsby-plugin-react-helmet": "^6.14",
     "gatsby-plugin-sass": "^6.14",
diff --git a/www/utils/createPages.js b/www/utils/createPages.js
index 9aac7dbcf4..a9f7b6f842 100644
--- a/www/utils/createPages.js
+++ b/www/utils/createPages.js
@@ -5,6 +5,7 @@ const { getThemesSCSSVariables, processComponentSCSSVariables } = require('../th
 const componentsUsage = require('../src/utils/componentsUsage');
 
 const componentPageTemplate = path.resolve(__dirname, '../src/templates/component-page-template.tsx');
+const defaultMdxPageTemplate = path.resolve(__dirname, '../src/templates/default-mdx-page-template.tsx');
 
 async function createPages(graphql, actions, reporter) {
   // Destructure the createPage function from the actions object
@@ -26,6 +27,7 @@ async function createPages(graphql, actions, reporter) {
             id
             fields {
               slug
+              source
             }
             frontmatter {
               components
@@ -42,12 +44,12 @@ async function createPages(graphql, actions, reporter) {
     reporter.panicOnBuild('🚨  ERROR: Loading createPages query');
   }
   // Create component detail pages.
-  const components = result.data.allMdx.edges;
+  const pages = result.data.allMdx.edges;
 
   const themesSCSSVariables = await getThemesSCSSVariables();
 
   // you'll call `createPage` for each result
-  for (const { node } of components) {
+  for (const { node } of pages) {
     const componentDir = node.fields.slug.split('/')[0];
     const variablesPath = path.resolve(__dirname, `../../src/${componentDir}/_variables.scss`);
     const githubEditPath = `https://github.com/openedx/paragon/edit/master/src${node.internal.contentFilePath.split('src')[1]}`;
@@ -58,22 +60,39 @@ async function createPages(graphql, actions, reporter) {
       scssVariablesData = await processComponentSCSSVariables(variablesPath, themesSCSSVariables);
     }
 
-    createPage({
-      // This is the slug you created before
-      // (or `node.frontmatter.slug`)
-      path: node.fields.slug,
-      // This layout will wrap our MDX content
-      component: `${componentPageTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
-      // You can use the values in this context in
-      // our page layout component
-      context: {
-        id: node.id,
-        components: node.frontmatter.components || [],
-        scssVariablesData,
-        componentsUsageInsights: Object.keys(componentsUsage),
-        githubEditPath,
-      },
-    });
+    if (node.fields.source === 'components') {
+      createPage({
+        // This is the slug you created before
+        // (or `node.frontmatter.slug`)
+        path: node.fields.slug,
+        // This layout will wrap our MDX content
+        component: `${componentPageTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
+        // You can use the values in this context in
+        // our page layout component
+        context: {
+          id: node.id,
+          components: node.frontmatter.components || [],
+          scssVariablesData,
+          componentsUsageInsights: Object.keys(componentsUsage),
+          githubEditPath,
+        },
+      });
+    }
+    
+    if (node.fields.source === 'pages') {
+      createPage({
+        path: node.fields.slug,
+        component: `${defaultMdxPageTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
+        context: {
+          id: node.id,
+          githubEditPath,
+          scssVariablesData,
+          frontmatter: {
+            title: node.frontmatter.title,
+          },
+        },
+      });
+    }
   }
 
   INSIGHTS_PAGES.forEach(({ path: pagePath, tab }) => {