diff --git a/apps/civicsignalblog/.eslintrc.js b/apps/civicsignalblog/.eslintrc.js
index ba1843094..4c66c3da2 100644
--- a/apps/civicsignalblog/.eslintrc.js
+++ b/apps/civicsignalblog/.eslintrc.js
@@ -3,6 +3,15 @@ module.exports = {
   extends: ["eslint-config-commons-ui/next"],
   rules: {
     "react/jsx-filename-extension": [1, { extensions: [".js", ".tsx"] }], // This rule allows JSX syntax in both .js and tsx files
+    // Disable requirement for importing file extensions for js and tsx files, without this we cant import custom components in Payload
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        js: "never",
+        tsx: "never",
+      },
+    ],
   },
   settings: {
     "import/resolver": {
diff --git a/apps/civicsignalblog/jest.config.js b/apps/civicsignalblog/jest.config.js
index dea4ec013..85bba17cd 100644
--- a/apps/civicsignalblog/jest.config.js
+++ b/apps/civicsignalblog/jest.config.js
@@ -11,6 +11,8 @@ module.exports = {
       "<rootDir>/../../packages/commons-ui-core/src/$1",
     "^@/commons-ui/next/(.*)$":
       "<rootDir>/../../packages/commons-ui-next/src/$1",
+    "^@/commons-ui/payload/(.*)$":
+      "<rootDir>/../../packages/commons-ui-payload/src/$1",
   },
   transformIgnorePatterns: ["<rootDir>/node_modules/(?!camelcase-keys)"],
 };
diff --git a/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js b/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js
index c324dcd58..36f2fabce 100644
--- a/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js
+++ b/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js
@@ -15,9 +15,10 @@ exports[`<PageHeader /> renders unchanged 1`] = `
       </h2>
       <div
         class="MuiBox-root css-0"
+        typographyprops="[object Object]"
       >
-        <h2
-          class="MuiTypography-root MuiTypography-h2 css-hd3436-MuiTypography-root"
+        <p
+          class="MuiTypography-root MuiTypography-body1 css-oo170e-MuiTypography-root"
         >
           Let's
           <strong>
@@ -27,7 +28,7 @@ exports[`<PageHeader /> renders unchanged 1`] = `
           <strong>
              together
           </strong>
-        </h2>
+        </p>
       </div>
     </div>
   </div>