diff --git a/astro.config.mjs b/astro.config.mjs
index 34092b7..55e7487 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -6,8 +6,11 @@ import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 import sitemap from '@astrojs/sitemap';
 import image from '@astrojs/image';
+import mdx from "@astrojs/mdx";
 import partytown from '@astrojs/partytown';
 
+import { remarkReadingTime } from './src/utils/frontmatter.js';
+
 import { SITE } from './src/config.mjs';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -28,6 +31,7 @@ export default defineConfig({
 		}),
 		sitemap(),
 		image(),
+		mdx(),
 
 		/* Disable this integration if you don't use Google Analytics (or other external script). */
 		partytown({
@@ -35,6 +39,11 @@ export default defineConfig({
 		}),
 	],
 
+	markdown: {
+    remarkPlugins: [remarkReadingTime],
+    extendDefaultPlugins: true,
+  },
+
 	vite: {
 		resolve: {
 			alias: {
diff --git a/data/blog/astrowind-template-in-depth.md b/data/blog/astrowind-template-in-depth.md
index 676cc79..a683e07 100644
--- a/data/blog/astrowind-template-in-depth.md
+++ b/data/blog/astrowind-template-in-depth.md
@@ -1,5 +1,5 @@
 ---
-pubDate: "Aug 08 2022"
+publishDate: "Aug 08 2022"
 title: "AstroWind template in depth"
 description: "Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti."
 image: "~/assets/images/hero.jpg"
diff --git a/data/blog/get-started-website-with-astro-tailwind-css.md b/data/blog/get-started-website-with-astro-tailwind-css.md
index 3650ec8..fd64041 100644
--- a/data/blog/get-started-website-with-astro-tailwind-css.md
+++ b/data/blog/get-started-website-with-astro-tailwind-css.md
@@ -1,5 +1,5 @@
 ---
-pubDate: "Aug 12 2022"
+publishDate: "Aug 12 2022"
 title: "Get started with AstroWind to create a website using Astro and Tailwind CSS"
 description: "Lorem ipsum dolor sit amet"
 excerpt: "Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat"
diff --git a/data/blog/how-to-customize-astrowind-to-your-brand.md b/data/blog/how-to-customize-astrowind-to-your-brand.md
index 12ee481..8c5c301 100644
--- a/data/blog/how-to-customize-astrowind-to-your-brand.md
+++ b/data/blog/how-to-customize-astrowind-to-your-brand.md
@@ -1,5 +1,5 @@
 ---
-pubDate: "Aug 10 2022"
+publishDate: "Aug 10 2022"
 title: "How to customize AstroWind template to suit your branding"
 description: "Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat"
 image: "~/assets/images/colors.jpg"
diff --git a/data/blog/markdown-elements-demo-post.md b/data/blog/markdown-elements-demo-post.mdx
similarity index 99%
rename from data/blog/markdown-elements-demo-post.md
rename to data/blog/markdown-elements-demo-post.mdx
index 7561cd3..647f061 100644
--- a/data/blog/markdown-elements-demo-post.md
+++ b/data/blog/markdown-elements-demo-post.mdx
@@ -1,12 +1,11 @@
 ---
-pubDate: "Aug 02 2022"
+publishDate: "Aug 02 2022"
 title: "Markdown elements demo post"
 description: "Lorem ipsum dolor sit amet"
 excerpt: "Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat"
 image: "~/assets/images/astronaut.jpg"
 tags: [markdown, astro, blog]
 ---
-
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 ## <a name="Headings"></a>Headings
diff --git a/data/blog/useful-resources-to-create-websites.md b/data/blog/useful-resources-to-create-websites.md
index 6377644..ac5ddc0 100644
--- a/data/blog/useful-resources-to-create-websites.md
+++ b/data/blog/useful-resources-to-create-websites.md
@@ -1,5 +1,5 @@
 ---
-pubDate: "Aug 09 2022"
+publishDate: "Aug 09 2022"
 title: "Useful tools and resources to create a professional website"
 description: "Nibh senectus lacinia volutpat nostra taciti ac posuere, dictum ultricies dictumst luctus in vehicula, mus molestie venenatis penatibus ridiculus elementum. Phasellus sollicitudin dignissim parturient."
 image: "~/assets/images/tools.jpg"
diff --git a/package.json b/package.json
index 3b781fb..3ff19c6 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@astrojs/image": "^0.7.0",
+    "@astrojs/mdx": "^0.11.4",
     "@astrojs/partytown": "^1.0.0",
     "@astrojs/rss": "^1.0.0",
     "@astrojs/sitemap": "^1.0.0",
@@ -31,6 +32,7 @@
     "eslint-plugin-astro": "^0.19.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "limax": "^v2.1.0",
+    "mdast-util-to-string": "^3.1.0",
     "prettier": "^2.7.1",
     "prettier-plugin-astro": "^0.5.4",
     "reading-time": "^1.5.0",
@@ -39,5 +41,6 @@
   },
   "engines": {
     "node": "^14.15.0 || >=16.0.0"
-  }
+  },
+  "dependencies": {}
 }
diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro
index eaa1d26..5eb9b59 100644
--- a/src/components/blog/ListItem.astro
+++ b/src/components/blog/ListItem.astro
@@ -43,7 +43,7 @@ const image = await findImage(post.image);
 		<footer class="mt-4">
 			<div>
 				<span class="text-gray-500 dark:text-slate-400">
-					<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~
+					<time datetime={post.publishDate}>{getFormattedDate(post.publishDate)}</time> ~
 					{Math.ceil(post.readingTime)} min read
 				</span>
 			</div>
diff --git a/src/components/blog/SinglePost.astro b/src/components/blog/SinglePost.astro
index eec02a3..c28102e 100644
--- a/src/components/blog/SinglePost.astro
+++ b/src/components/blog/SinglePost.astro
@@ -11,7 +11,7 @@ const { post } = Astro.props;
 	<article>
 		<header>
 			<p class="max-w-3xl mx-auto text-center">
-				<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min read
+				<time datetime={post.publishDate}>{getFormattedDate(post.publishDate)}</time> ~ {Math.ceil(post.readingTime)} min read
 			</p>
 			<h1
 				class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading"
@@ -34,7 +34,7 @@ const { post } = Astro.props;
 		<div
 			class="container mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
 		>
-			<Fragment set:html={post.body} />
+			{post.Content ? <post.Content /> : <Fragment set:html={post.body} />}
 		</div>
 		<div class="container mx-auto px-8 sm:px-6 max-w-3xl mt-8">
 			<PostTags tags={post.tags} />
diff --git a/src/pages/rss.xml.js b/src/pages/rss.xml.js
index 7958586..27ae1fd 100644
--- a/src/pages/rss.xml.js
+++ b/src/pages/rss.xml.js
@@ -23,7 +23,7 @@ export const get = async () => {
 			link: getPermalink(post.slug, 'post'),
 			title: post.title,
 			description: post.description,
-			pubDate: post.pubDate,
+			publishDate: post.publishDate,
 		})),
 	});
 };
diff --git a/src/utils/frontmatter.js b/src/utils/frontmatter.js
new file mode 100644
index 0000000..560789a
--- /dev/null
+++ b/src/utils/frontmatter.js
@@ -0,0 +1,11 @@
+import getReadingTime from 'reading-time';
+import { toString } from 'mdast-util-to-string';
+
+export function remarkReadingTime() {
+  return function (tree, { data }) {
+    const text = toString(tree);
+    const readingTime = Math.ceil(getReadingTime(text).minutes);
+
+    data.astro.frontmatter.readingTime = readingTime;
+  };
+}
\ No newline at end of file
diff --git a/src/utils/posts.js b/src/utils/posts.js
index eb49cfd..9c133e7 100644
--- a/src/utils/posts.js
+++ b/src/utils/posts.js
@@ -1,13 +1,11 @@
-import getReadingTime from 'reading-time';
-
 const getNormalizedPost = async (post) => {
-	const { frontmatter, compiledContent, rawContent, file } = post;
+	const { frontmatter, Content, file } = post;
 	const ID = file.split('/').pop().split('.').shift();
 
 	return {
 		id: ID,
 
-		pubDate: frontmatter.pubDate,
+		publishDate: frontmatter.publishDate,
 		draft: frontmatter.draft,
 
 		canonical: frontmatter.canonical,
@@ -15,19 +13,21 @@ const getNormalizedPost = async (post) => {
 
 		title: frontmatter.title,
 		description: frontmatter.description,
-		body: compiledContent(),
 		image: frontmatter.image,
 
+		Content: Content,
+		// or 'body' in case you consume from API
+
 		excerpt: frontmatter.excerpt,
 		authors: frontmatter.authors,
 		category: frontmatter.category,
 		tags: frontmatter.tags,
-		readingTime: Math.ceil(getReadingTime(rawContent()).minutes),
+		readingTime: frontmatter.readingTime,
 	};
 };
 
 const load = async function () {
-	const posts = import.meta.glob('~/../data/blog/**/*.md', {
+	const posts = import.meta.glob(['~/../data/blog/**/*.md', '~/../data/blog/**/*.mdx'], {
 		eager: true,
 	});
 
@@ -37,7 +37,7 @@ const load = async function () {
 	});
 
 	const results = (await Promise.all(normalizedPosts))
-		.sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf())
+		.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf())
 		.filter((post) => !post.draft);
 	return results;
 };