diff --git a/pages/index.js b/pages/index.js
index f06130e..c6db51b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -6,7 +6,7 @@ import Container from "../components/Container";
 import Layout from "../components/Layout";
 import Sidemenu from "../components/Sidemenu";
 import Card from "../components/Card";
-import { gardensFilePath, GARDENS_PATH } from "../utils/mdUtils";
+import { gardenFilePath, GARDENS_PATH } from "../utils/mdxUtils";
 import { motion } from "framer-motion";
 
 export default function Index({ posts }) {
@@ -65,7 +65,7 @@ export default function Index({ posts }) {
 }
 
 export function getStaticProps() {
-    const posts = gardensFilePath.map((filePath) => {
+    const posts = gardenFilePath.map((filePath) => {
         const source = fs.readFileSync(path.join(GARDENS_PATH, filePath));
         const { content, data } = matter(source);
 
diff --git a/pages/posts/[slug].js b/pages/posts/[slug].js
index 7ddfe29..c648fce 100644
--- a/pages/posts/[slug].js
+++ b/pages/posts/[slug].js
@@ -5,18 +5,21 @@ import { serialize } from "next-mdx-remote/serialize";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import Link from "next/link";
+import Image from "next/image";
 import path from "path";
 import Layout from "../../components/Layout";
-import { gardensFilePath, GARDENS_PATH } from "../../utils/mdUtils";
+import { gardenFilePath, GARDENS_PATH } from "../../utils/mdxUtils";
 
 // Custom components/renderers to pass to MDX.
 // Since the MDX files aren't loaded by webpack, they have no knowledge of how
 // to handle import statements. Instead, you must include components in scope
 // here.
 const components = {
+    img: (props) => <Image {...props} layout="fill" loading="lazy" />,
     // It also works with dynamically-imported components, which is especially
     // useful for conditionally loading components for certain routes.
     // See the notes in README.md for more details.
+    // TestComponent: dynamic(() => import("../../components/TestComponent")),
     Head,
 };
 
@@ -42,7 +45,7 @@ export default function GardenPage({ source, frontMatter }) {
 }
 
 export const getStaticProps = async ({ params }) => {
-    const gardenFilePath = path.join(GARDENS_PATH, `${params.slug}.md`);
+    const gardenFilePath = path.join(GARDENS_PATH, `${params.slug}.mdx`);
     const source = fs.readFileSync(gardenFilePath);
 
     const { content, data } = matter(source);
@@ -65,9 +68,9 @@ export const getStaticProps = async ({ params }) => {
 };
 
 export const getStaticPaths = async () => {
-    const paths = gardensFilePath
+    const paths = gardenFilePath
         // Remove file extensions for page paths
-        .map((path) => path.replace(/\.md?$/, ""))
+        .map((path) => path.replace(/\.mdx?$/, ""))
         // Map the path into the static paths object required by Next.js
         .map((slug) => ({ params: { slug } }));
 
diff --git a/posts/gardens/andy-matuschak.md b/posts/gardens/andy-matuschak.mdx
similarity index 55%
rename from posts/gardens/andy-matuschak.md
rename to posts/gardens/andy-matuschak.mdx
index eddcc9e..7933381 100644
--- a/posts/gardens/andy-matuschak.md
+++ b/posts/gardens/andy-matuschak.mdx
@@ -3,8 +3,12 @@ title: Andy Matuschak
 description: Algorithms that make themselves known
 topics: ['evergreen notes', 'education', 'tools for thought']
 url: https://notes.andymatuschak.org/
-image: https://via.placeholder.com/200x250
+image: /public/andy1.jpg
 tools: ['mystery system']
 ---
 
+![Andy Matuschak's website](/public/andy1.jpg)
 
+![Andy Matuschak's website](/public/andy2.jpg)
+
+![Andy Matuschak's website](/public/andy3.jpg)
diff --git a/posts/gardens/bill-seitz.md b/posts/gardens/bill-seitz.mdx
similarity index 100%
rename from posts/gardens/bill-seitz.md
rename to posts/gardens/bill-seitz.mdx
diff --git a/posts/gardens/buster-benson.md b/posts/gardens/buster-benson.mdx
similarity index 100%
rename from posts/gardens/buster-benson.md
rename to posts/gardens/buster-benson.mdx
diff --git a/posts/gardens/gwern-branden.md b/posts/gardens/gwern-branden.mdx
similarity index 100%
rename from posts/gardens/gwern-branden.md
rename to posts/gardens/gwern-branden.mdx
diff --git a/posts/gardens/joel-hooks.md b/posts/gardens/joel-hooks.mdx
similarity index 100%
rename from posts/gardens/joel-hooks.md
rename to posts/gardens/joel-hooks.mdx
diff --git a/posts/gardens/tom-critchlow.md b/posts/gardens/tom-critchlow.mdx
similarity index 100%
rename from posts/gardens/tom-critchlow.md
rename to posts/gardens/tom-critchlow.mdx
diff --git a/public/andy1.jpg b/public/andy1.jpg
new file mode 100644
index 0000000..d3e1b3e
Binary files /dev/null and b/public/andy1.jpg differ
diff --git a/public/andy2.jpg b/public/andy2.jpg
new file mode 100644
index 0000000..487349e
Binary files /dev/null and b/public/andy2.jpg differ
diff --git a/public/andy3.jpg b/public/andy3.jpg
new file mode 100644
index 0000000..f3a87e6
Binary files /dev/null and b/public/andy3.jpg differ
diff --git a/utils/mdUtils.js b/utils/mdxUtils.js
similarity index 83%
rename from utils/mdUtils.js
rename to utils/mdxUtils.js
index ce048a5..a4063b0 100644
--- a/utils/mdUtils.js
+++ b/utils/mdxUtils.js
@@ -6,7 +6,7 @@ export const GARDENS_PATH = path.join(process.cwd(), "posts", "gardens");
 export const TOOLS_PATH = path.join(process.cwd(), "posts", "tools");
 
 // patternFilePath is the list of all mdx files inside the POSTS_PATH directory
-export const gardensFilePath = fs
+export const gardenFilePath = fs
     .readdirSync(GARDENS_PATH)
     // Only include md(x) files
-    .filter((path) => /\.md?$/.test(path));
+    .filter((path) => /\.mdx?$/.test(path));