diff --git a/components/MDXContent.tsx b/components/MDXContent.tsx
index 4dad70f3..8d45b2ba 100644
--- a/components/MDXContent.tsx
+++ b/components/MDXContent.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import { MDXRemote } from 'next-mdx-remote/rsc';
-import { useLocale } from 'next-intl';
+import { getLocale } from 'next-intl/server';
 
 // Blog components
 import TechnicalGrid from './blog/TechnicalGrid';
 import Stats from './blog/Stats';
 import VisualLinkPreview from './blog/VisualLinkPreview';
 import StickyNarrative from './blog/StickyNarrative';
+import ComparisonGrid from './blog/ComparisonGrid';
+import HighlightBox from './blog/HighlightBox';
+import ChatBubble from './blog/ChatBubble';
 
 // Home components
 import Hero from './home/Hero';
@@ -36,10 +39,14 @@ function HeroSection(props: any) {
   );
 }
 
-function Block(props: any) {
-  const { type, data } = props;
-  const locale = useLocale();
-  switch (type) {
+async function Block(props: any) {
+  const { type, data, children } = props;
+  const locale = await getLocale();
+
+  // Normalize type (Payload sometimes uses blockType in data)
+  const blockType = type || data?.blockType;
+
+  switch (blockType) {
     // Blog Components
     case 'technicalGrid':
       return <TechnicalGrid {...data} />;
@@ -49,6 +56,12 @@ function Block(props: any) {
       return <VisualLinkPreview {...data} />;
     case 'stickyNarrative':
       return <StickyNarrative {...data} />;
+    case 'comparisonGrid':
+      return <ComparisonGrid {...data} />;
+    case 'highlightBox':
+      return <HighlightBox {...data}>{children}</HighlightBox>;
+    case 'chatBubble':
+      return <ChatBubble {...data}>{children}</ChatBubble>;
 
     // Home Components
     case 'homeHero':
@@ -74,7 +87,12 @@ function Block(props: any) {
 
     default:
       return (
-        <div className="p-4 border-2 border-dashed border-gray-300">Unknown Block: {type}</div>
+        <div className="p-8 border-2 border-dashed border-red-200 rounded-2xl my-8 bg-red-50 text-red-600">
+          <p className="font-bold mb-2">Unknown Block Type: {blockType}</p>
+          <pre className="text-xs overflow-auto p-4 bg-white/50 rounded">
+            {JSON.stringify({ type, data: !!data, hasChildren: !!children }, null, 2)}
+          </pre>
+        </div>
       );
   }
 }
diff --git a/next-env.d.ts b/next-env.d.ts
index c4b7818f..9edff1c7 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/package.json b/package.json
index fdb38a5f..348ccccf 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.3.22-rc.20",
+  "version": "2.3.22-rc.21",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",
diff --git a/push_error.log b/push_error.log
new file mode 100644
index 00000000..4ef0e9d9
--- /dev/null
+++ b/push_error.log
@@ -0,0 +1,8 @@
+remote: 
+remote: Create a new pull request for 'feature/mdx-migration':        
+remote:   https://git.infra.mintel.me/mmintel/klz-cables.com/pulls/new/feature/mdx-migration        
+remote: 
+remote: . Processing 1 references        
+remote: Processed 1 references in total        
+To https://git.infra.mintel.me/mmintel/klz-cables.com.git
+   58092917..f17a8c8c  feature/mdx-migration -> feature/mdx-migration