From b95f5c1aeb3d20c426b5c86a8df1b8c9cb2fe691 Mon Sep 17 00:00:00 2001
From: Jake Runyan <runyanjake@gmail.com>
Date: Fri, 13 Feb 2026 11:16:44 -0800
Subject: [PATCH] update recipe rendering engine to use JSX components for
 recipe card and frontmatter for title bar

---
 .claude/CLAUDE.md                             |   9 +-
 .claude/rules/architecture.md                 |   6 +-
 .claude/rules/recipe-format.md                |  47 ++++-
 .claude/settings.local.json                   |   4 +-
 app/recipes/[category]/[slug]/page.tsx        |  50 +++++-
 components/RecipeCard.tsx                     | 161 +++++++++++-------
 components/RecipeGridCard.tsx                 |  74 ++++++++
 components/RecipePageClient.tsx               |  13 +-
 components/RecipeTabs.tsx                     | 156 -----------------
 components/RecipesClient.tsx                  |   4 +-
 lib/parseRecipe.ts                            |  45 -----
 package-lock.json                             |  91 +++++++++-
 package.json                                  |   1 +
 public/recipes/baking/apple-pie/apple-pie.mdx |   6 +-
 public/recipes/cajun/gumbo/gumbo.mdx          |   6 +-
 .../broccoli-beef-in-oyster-sauce.mdx         |   6 +-
 .../egg-flower-soup/egg-flower-soup.mdx       |   6 +-
 .../tangy-runyan-eggroll.mdx                  |   6 +-
 .../peach-simple-syrup/peach-simple-syrup.mdx |   6 +-
 .../example-recipe-1/example-recipe-1.mdx     |   6 +-
 .../example-recipe-2/example-recipe-2.mdx     |   6 +-
 .../indian/brown-lentils/brown-lentils.mdx    |  12 +-
 .../indian/chana-masala/chana-masala.mdx      |   6 +-
 .../chicken-tikka-masala.mdx                  |   6 +-
 .../indian/palak-paneer/palak-paneer.mdx      |   6 +-
 .../chicken-parmesan/chicken-parmesan.mdx     |   6 +-
 .../fusilli-with-vodka-basil-parmesan.mdx     |   6 +-
 .../italian/pizza-dough/pizza-dough.mdx       |   6 +-
 .../italian/pizza-sauce/pizza-sauce.mdx       |   6 +-
 .../ajitsuke-tamago-ramen-egg.mdx             |   6 +-
 .../golden-curry-beef-stew.mdx                |   6 +-
 .../golden-curry-chicken.mdx                  |   6 +-
 .../beef-bourguignon/beef-bourguignon.mdx     |   6 +-
 .../garlic-herb-butter-roast-turkey.mdx       |   6 +-
 .../grilled-lemon-pepper-salmon.mdx           |   6 +-
 .../jamaican-jerk-chicken.mdx                 |   6 +-
 .../ribs-instant-pot/ribs-instant-pot.mdx     |   6 +-
 .../meat/turkey-gravy/turkey-gravy.mdx        |   6 +-
 public/recipes/mexican/birria/birria.mdx      |   6 +-
 public/recipes/mexican/elote/elote.mdx        |   6 +-
 public/recipes/mexican/horchata/horchata.mdx  |   6 +-
 .../mexican/mexican-rice/mexican-rice.mdx     |   6 +-
 .../mexican/pinto-beans/pinto-beans.mdx       |  14 +-
 .../caesar-salad-dressing.mdx                 |   6 +-
 .../cauliflower-mash/cauliflower-mash.mdx     |   6 +-
 .../pickled-red-onions/pickled-red-onions.mdx |   6 +-
 .../sous-vide-mashed-potatoes.mdx             |   6 +-
 .../chicken-noodle-soup.mdx                   |   6 +-
 public/recipes/vietnamese/pho/pho.mdx         |   6 +-
 49 files changed, 497 insertions(+), 394 deletions(-)
 create mode 100644 components/RecipeGridCard.tsx
 delete mode 100644 components/RecipeTabs.tsx
 delete mode 100644 lib/parseRecipe.ts

diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
index 89d0e5c..bfadf30 100644
--- a/.claude/CLAUDE.md
+++ b/.claude/CLAUDE.md
@@ -8,7 +8,7 @@ A personal recipe website. Content-first, no-nonsense. The name of the third hom
 
 - **Next.js 15** with App Router, TypeScript, Tailwind CSS
 - **MDX** for recipe content with YAML frontmatter
-- **ReactMarkdown + remark-gfm** for rendering recipe sections client-side
+- **next-mdx-remote/rsc + remark-gfm** for compiling MDX content server-side
 - **Static site generation (SSG)** — all pages are prerendered at build time
 - **No database** — recipes are MDX files on disk
 
@@ -30,13 +30,12 @@ components/
   RecipesSidebar.tsx          # Search + category + tag filters
   SelectedTags.tsx            # Active tag chips
   TagSelector.tsx             # Tag dropdown picker
-  RecipeCard.tsx              # Recipe grid card
-  RecipePageClient.tsx        # Recipe detail page wrapper
-  RecipeTabs.tsx              # Section tabs (Photos/Ingredients/Instructions/Notes/References)
+  RecipeGridCard.tsx          # Recipe grid card for listing page
+  RecipeCard.tsx              # MDX component — splits h2 children into tab sections
+  RecipePageClient.tsx        # Recipe detail page wrapper (server component)
 
 lib/
   recipes.ts                  # Recipe file loader with in-memory cache; reads from public/recipes/
-  parseRecipe.ts              # Splits MDX content into ## sections for tabs
 
 public/
   assets/                     # Site-level images (homepage SVGs)
diff --git a/.claude/rules/architecture.md b/.claude/rules/architecture.md
index 14d6c95..c89b878 100644
--- a/.claude/rules/architecture.md
+++ b/.claude/rules/architecture.md
@@ -5,12 +5,12 @@
 - **RecipeLayout** owns sidebar open/close state; passes `handleFilterChange` (memoised with `useCallback`) down to RecipesSidebar
 - **RecipesSidebar** owns filter state (search, category, selectedTags) and reports changes via `useEffect` → `onFilterChange`
 - **RecipesClient** owns filtered recipe list (memoised with `useMemo`) and passes `setFilters` as `onFilterChange`
-- **RecipeTabs** renders content with ReactMarkdown; custom `img` component rewrites `./` paths to `/recipes/[folderPath]/`
+- **RecipeCard** (MDX component) receives compiled children, splits by h2 into tab sections; custom `img` component in page.tsx rewrites `./` paths to `/recipes/[folderPath]/`
 
 ## Known Constraints
 
 - `folderPath` in recipe metadata uses backslashes on Windows (from `path.join`) — always `.replace(/\\/g, '/')` before using in URLs
-- Images in recipe MDX are wrapped in `<p>` by ReactMarkdown — use `<img>` not `<figure>` to avoid invalid HTML nesting (`<p><figure>` is invalid)
+- Images in recipe MDX are wrapped in `<p>` by MDX compilation — use `<img>` not `<figure>` to avoid invalid HTML nesting (`<p><figure>` is invalid)
 - `lib/recipes.ts` uses Node.js `fs` — server-side only; never import in client components
-- Build warning about `<img>` vs `<Image />` in RecipeTabs is intentional — markdown images can't use Next.js Image component
+- Build warning about `<img>` vs `<Image />` in recipe pages is intentional — markdown images can't use Next.js Image component
 - Never add redundant ARIA roles on semantic elements (`<main>`, `<aside>`, `<footer>` already carry implicit roles)
diff --git a/.claude/rules/recipe-format.md b/.claude/rules/recipe-format.md
index b292447..35026d4 100644
--- a/.claude/rules/recipe-format.md
+++ b/.claude/rules/recipe-format.md
@@ -21,9 +21,17 @@ displayPhoto: "./assets/hero.jpg"
 ---
 ```
 
-## Content Sections
+## Content Structure
 
-Content uses `## ` (h2) headings to define tabs rendered in the UI:
+Content after frontmatter is compiled as MDX using `next-mdx-remote/rsc`. The `<RecipeCard>` JSX component wraps recipe sections and renders them as tabs in the UI.
+
+- Markdown **before** `<RecipeCard>` renders as intro prose above the recipe card
+- Markdown **after** `</RecipeCard>` renders as outro prose below the recipe card
+- **Important**: a blank line after `<RecipeCard>` is required for MDX to parse the content inside as markdown
+
+### `<RecipeCard>` Sections
+
+`## ` (H2) headings inside `<RecipeCard>` define tabs:
 
 - `## Photos` — images with italic captions (`*caption text*`)
 - `## Ingredients` — bullet lists, optionally grouped with h3 subheadings
@@ -31,6 +39,41 @@ Content uses `## ` (h2) headings to define tabs rendered in the UI:
 - `## Notes` — tips, variations, storage (optional)
 - `## References` — credits and sources (optional)
 
+### Example
+
+```mdx
+---
+title: "Lentils"
+description: "A neutral lentil dish."
+...
+---
+
+This recipe uses brown lentils (whole Masoor Dal)...
+
+<RecipeCard>
+
+## Photos
+![Hero](./assets/hero.jpg)
+*Finished lentils*
+
+## Ingredients
+- 1 cup brown lentils
+...
+
+## Instructions
+1. Rinse lentils...
+...
+
+## Notes
+### Tips
+- Try with different lentils!
+
+## References
+- Reference Recipe **[HERE](https://example.com)**
+
+</RecipeCard>
+```
+
 ## Image Paths
 
 Images use relative paths: `./assets/image.jpg`
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 8175ca9..15700d7 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -15,7 +15,9 @@
       "Read(//c/Users/runya/Documents/repositories/recipes/recipes/docs/**)",
       "Bash(node scripts/import-recipes.js:*)",
       "Bash(powershell.exe -Command \"Test-Path ''c:\\\\Users\\\\runya\\\\Documents\\\\repositories\\\\cooking\\\\.next\\\\standalone\\\\server.js''\")",
-      "Bash(powershell.exe -Command:*)"
+      "Bash(powershell.exe -Command:*)",
+      "Bash(node migrate-mdx.mjs:*)",
+      "Bash(node migrate-mdx.js:*)"
     ]
   }
 }
diff --git a/app/recipes/[category]/[slug]/page.tsx b/app/recipes/[category]/[slug]/page.tsx
index 2d807e8..1dadcaa 100644
--- a/app/recipes/[category]/[slug]/page.tsx
+++ b/app/recipes/[category]/[slug]/page.tsx
@@ -1,7 +1,9 @@
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
+import { compileMDX } from 'next-mdx-remote/rsc';
+import remarkGfm from 'remark-gfm';
 import { getRecipeByCategoryAndSlug, getAllRecipePaths } from '@/lib/recipes';
-import { parseRecipeSections } from '@/lib/parseRecipe';
+import RecipeCard from '@/components/RecipeCard';
 import RecipePageClient from '@/components/RecipePageClient';
 
 interface RecipePageProps {
@@ -49,12 +51,48 @@ export default async function RecipePage({ params }: RecipePageProps) {
     notFound();
   }
 
-  const sections = parseRecipeSections(recipe.content);
+  const folderPath = recipe.folderPath;
+
+  const { content } = await compileMDX({
+    source: recipe.content,
+    components: {
+      RecipeCard,
+      img: ({ src, alt }: { src?: string; alt?: string }) => {
+        const srcString = typeof src === 'string' ? src : '';
+        const imageSrc = srcString.startsWith('./')
+          ? `/recipes/${folderPath}/${srcString.replace('./', '')}`.replace(/\\/g, '/')
+          : srcString;
+        return (
+          <img
+            src={imageSrc}
+            alt={alt || 'Recipe image'}
+            className="rounded-lg shadow-md w-full max-w-2xl mx-auto my-6 block"
+            loading="lazy"
+          />
+        );
+      },
+      a: ({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+        <a
+          href={href}
+          className="text-blue-600 dark:text-blue-400 hover:underline"
+          target={href?.startsWith('http') ? '_blank' : undefined}
+          rel={href?.startsWith('http') ? 'noopener noreferrer' : undefined}
+          {...props}
+        >
+          {children}
+        </a>
+      ),
+    },
+    options: {
+      mdxOptions: {
+        remarkPlugins: [remarkGfm],
+      },
+    },
+  });
 
   return (
-    <RecipePageClient
-      recipe={recipe}
-      sections={sections}
-    />
+    <RecipePageClient recipe={recipe}>
+      {content}
+    </RecipePageClient>
   );
 }
diff --git a/components/RecipeCard.tsx b/components/RecipeCard.tsx
index 8439981..7ff055d 100644
--- a/components/RecipeCard.tsx
+++ b/components/RecipeCard.tsx
@@ -1,74 +1,109 @@
-import Link from 'next/link';
-import Image from 'next/image';
-import type { RecipeMetadata } from '@/lib/recipes';
+'use client';
 
-interface RecipeCardProps {
-  recipe: RecipeMetadata & { folderPath: string };
+import React, { useState, type ReactNode } from 'react';
+
+interface Section {
+  title: string;
+  children: ReactNode[];
 }
 
-export default function RecipeCard({ recipe }: RecipeCardProps) {
-  // Convert relative path to public URL
-  const imageSrc = recipe.displayPhoto && recipe.displayPhoto.startsWith('./')
-    ? `/recipes/${recipe.folderPath}/${recipe.displayPhoto.replace('./', '')}`.replace(/\\/g, '/')
-    : recipe.displayPhoto || null;
+function extractText(node: ReactNode): string {
+  if (typeof node === 'string') return node;
+  if (typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(extractText).join('');
+  if (React.isValidElement(node)) {
+    const props = node.props as { children?: ReactNode };
+    if (props.children) return extractText(props.children);
+  }
+  return '';
+}
+
+export default function RecipeCard({ children }: { children: ReactNode }) {
+  const childArray = React.Children.toArray(children);
+  const sections: Section[] = [];
+  let currentSection: Section | null = null;
+
+  for (const child of childArray) {
+    if (React.isValidElement(child) && child.type === 'h2') {
+      const title = extractText((child.props as { children?: ReactNode }).children);
+      currentSection = { title, children: [] };
+      sections.push(currentSection);
+    } else if (currentSection) {
+      currentSection.children.push(child);
+    }
+  }
+
+  const tabOrder = ['Photos', 'Ingredients', 'Instructions', 'Notes', 'References'];
+  const orderedSections = tabOrder
+    .map(name => sections.find(s => s.title === name))
+    .filter((s): s is Section => s !== undefined);
+
+  const [activeTab, setActiveTab] = useState(orderedSections[0]?.title || '');
+
+  if (orderedSections.length === 0) return null;
+
+  const activeSection = orderedSections.find(s => s.title === activeTab);
 
   return (
-    <Link
-      href={`/recipes/${recipe.category}/${recipe.slug}`}
-      className="group block bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-lg transition-shadow"
-      aria-label={`View recipe: ${recipe.title}`}
+    <div
+      className="not-prose bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden my-8"
+      role="region"
+      aria-label="Recipe sections"
     >
-      <div className="aspect-video bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
-        {imageSrc ? (
-          <Image
-            src={imageSrc}
-            alt={`${recipe.title} - Recipe photo`}
-            fill
-            className="object-cover"
-            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-            unoptimized
-          />
-        ) : (
-          <div className="flex items-center justify-center h-full text-4xl text-gray-400 dark:text-gray-600">
-            🍽️
+      <div className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+        <nav className="flex overflow-x-auto" role="tablist" aria-label="Recipe section tabs">
+          {orderedSections.map((section) => (
+            <button
+              key={section.title}
+              onClick={() => setActiveTab(section.title)}
+              role="tab"
+              aria-selected={activeTab === section.title}
+              aria-controls={`tab-panel-${section.title.toLowerCase()}`}
+              id={`tab-${section.title.toLowerCase()}`}
+              className={`flex-shrink-0 px-6 py-4 text-sm font-medium whitespace-nowrap transition-colors border-b-2 ${
+                activeTab === section.title
+                  ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400 bg-white dark:bg-gray-800'
+                  : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'
+              }`}
+            >
+              {section.title}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      <div className="p-8">
+        {activeSection && (
+          <div
+            role="tabpanel"
+            id={`tab-panel-${activeSection.title.toLowerCase()}`}
+            aria-labelledby={`tab-${activeSection.title.toLowerCase()}`}
+            className={`prose prose-lg dark:prose-invert max-w-none
+              prose-headings:text-gray-900 dark:prose-headings:text-white
+              prose-p:text-gray-700 dark:prose-p:text-gray-300
+              prose-strong:text-gray-900 dark:prose-strong:text-white
+              prose-ol:list-decimal prose-ol:pl-6 prose-ol:space-y-2
+              prose-ul:list-disc prose-ul:pl-6 prose-ul:space-y-2
+              prose-li:text-gray-700 dark:prose-li:text-gray-300
+              prose-li:marker:text-gray-500 dark:prose-li:marker:text-gray-400
+              prose-code:text-gray-900 dark:prose-code:text-gray-100
+              prose-pre:bg-gray-100 dark:prose-pre:bg-gray-900
+              prose-table:border-collapse
+              prose-th:border prose-th:border-gray-300 dark:prose-th:border-gray-600
+              prose-td:border prose-td:border-gray-300 dark:prose-td:border-gray-600
+              ${activeSection.title === 'Photos'
+                ? 'prose-img:w-full prose-img:max-w-2xl prose-img:mx-auto [&_em]:block [&_em]:text-center [&_em]:text-sm [&_em]:text-gray-600 dark:[&_em]:text-gray-400 [&_em]:italic [&_em]:my-2'
+                : ''
+              }
+            `}
+          >
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
+              {activeSection.title}
+            </h2>
+            {activeSection.children}
           </div>
         )}
       </div>
-
-      <div className="p-4 space-y-2">
-        <h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
-          {recipe.title}
-        </h3>
-
-        <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
-          {recipe.description}
-        </p>
-
-        <div className="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-500" role="list" aria-label="Recipe details">
-          <span className="flex items-center gap-1" role="listitem">
-            <span aria-hidden="true">👥</span>
-            <span className="sr-only">Servings: </span>
-            {recipe.servings} servings
-          </span>
-        </div>
-
-        <div className="flex flex-wrap gap-1" role="list" aria-label="Recipe tags">
-          {recipe.tags.slice(0, 3).map((tag) => (
-            <span
-              key={tag}
-              role="listitem"
-              className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded"
-            >
-              {tag}
-            </span>
-          ))}
-          {recipe.tags.length > 3 && (
-            <span role="listitem" className="px-2 py-1 text-xs text-gray-500 dark:text-gray-500">
-              +{recipe.tags.length - 3} more
-            </span>
-          )}
-        </div>
-      </div>
-    </Link>
+    </div>
   );
 }
diff --git a/components/RecipeGridCard.tsx b/components/RecipeGridCard.tsx
new file mode 100644
index 0000000..e3c005b
--- /dev/null
+++ b/components/RecipeGridCard.tsx
@@ -0,0 +1,74 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import type { RecipeMetadata } from '@/lib/recipes';
+
+interface RecipeCardProps {
+  recipe: RecipeMetadata & { folderPath: string };
+}
+
+export default function RecipeGridCard({ recipe }: RecipeCardProps) {
+  // Convert relative path to public URL
+  const imageSrc = recipe.displayPhoto && recipe.displayPhoto.startsWith('./')
+    ? `/recipes/${recipe.folderPath}/${recipe.displayPhoto.replace('./', '')}`.replace(/\\/g, '/')
+    : recipe.displayPhoto || null;
+
+  return (
+    <Link
+      href={`/recipes/${recipe.category}/${recipe.slug}`}
+      className="group block bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-lg transition-shadow"
+      aria-label={`View recipe: ${recipe.title}`}
+    >
+      <div className="aspect-video bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
+        {imageSrc ? (
+          <Image
+            src={imageSrc}
+            alt={`${recipe.title} - Recipe photo`}
+            fill
+            className="object-cover"
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            unoptimized
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full text-4xl text-gray-400 dark:text-gray-600">
+            🍽️
+          </div>
+        )}
+      </div>
+
+      <div className="p-4 space-y-2">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+          {recipe.title}
+        </h3>
+
+        <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
+          {recipe.description}
+        </p>
+
+        <div className="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-500" role="list" aria-label="Recipe details">
+          <span className="flex items-center gap-1" role="listitem">
+            <span aria-hidden="true">👥</span>
+            <span className="sr-only">Servings: </span>
+            {recipe.servings} servings
+          </span>
+        </div>
+
+        <div className="flex flex-wrap gap-1" role="list" aria-label="Recipe tags">
+          {recipe.tags.slice(0, 3).map((tag) => (
+            <span
+              key={tag}
+              role="listitem"
+              className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded"
+            >
+              {tag}
+            </span>
+          ))}
+          {recipe.tags.length > 3 && (
+            <span role="listitem" className="px-2 py-1 text-xs text-gray-500 dark:text-gray-500">
+              +{recipe.tags.length - 3} more
+            </span>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}
diff --git a/components/RecipePageClient.tsx b/components/RecipePageClient.tsx
index 9954985..1a91bc5 100644
--- a/components/RecipePageClient.tsx
+++ b/components/RecipePageClient.tsx
@@ -1,16 +1,12 @@
-'use client';
-
 import Link from 'next/link';
-import RecipeTabs from './RecipeTabs';
 import type { Recipe } from '@/lib/recipes';
-import type { RecipeSection } from '@/lib/parseRecipe';
 
 interface RecipePageClientProps {
   recipe: Recipe;
-  sections: RecipeSection[];
+  children: React.ReactNode;
 }
 
-export default function RecipePageClient({ recipe, sections }: RecipePageClientProps) {
+export default function RecipePageClient({ recipe, children }: RecipePageClientProps) {
   return (
     <div>
       <article className="max-w-4xl mx-auto">
@@ -93,7 +89,10 @@ export default function RecipePageClient({ recipe, sections }: RecipePageClientP
           </div>
         </header>
 
-        <RecipeTabs sections={sections} folderPath={recipe.folderPath} />
+        {/* MDX content: intro prose + RecipeCard + outro prose */}
+        <div className="prose prose-lg dark:prose-invert max-w-none prose-p:text-gray-700 dark:prose-p:text-gray-300">
+          {children}
+        </div>
       </article>
     </div>
   );
diff --git a/components/RecipeTabs.tsx b/components/RecipeTabs.tsx
deleted file mode 100644
index 6b45559..0000000
--- a/components/RecipeTabs.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import type { RecipeSection } from '@/lib/parseRecipe';
-
-interface RecipeTabsProps {
-  sections: RecipeSection[];
-  folderPath: string;
-}
-
-export default function RecipeTabs({ sections, folderPath }: RecipeTabsProps) {
-  const tabOrder = ['Photos', 'Ingredients', 'Instructions', 'Notes', 'References'];
-  const orderedSections = tabOrder
-    .map(tabName => sections.find(s => s.title === tabName))
-    .filter((s): s is RecipeSection => s !== undefined);
-
-  const [activeTab, setActiveTab] = useState(orderedSections[0]?.title || '');
-
-  if (orderedSections.length === 0) {
-    return null;
-  }
-
-  const activeSection = orderedSections.find(s => s.title === activeTab);
-
-  return (
-    <div
-      className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden"
-      role="region"
-      aria-label="Recipe sections"
-    >
-      <div className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
-        <nav className="flex overflow-x-auto" role="tablist" aria-label="Recipe section tabs">
-          {orderedSections.map((section) => (
-            <button
-              key={section.title}
-              onClick={() => setActiveTab(section.title)}
-              role="tab"
-              aria-selected={activeTab === section.title}
-              aria-controls={`tab-panel-${section.title.toLowerCase()}`}
-              id={`tab-${section.title.toLowerCase()}`}
-              className={`flex-shrink-0 px-6 py-4 text-sm font-medium whitespace-nowrap transition-colors border-b-2 ${
-                activeTab === section.title
-                  ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400 bg-white dark:bg-gray-800'
-                  : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'
-              }`}
-            >
-              {section.title}
-            </button>
-          ))}
-        </nav>
-      </div>
-
-      <div className="p-8">
-        {activeSection && (
-          <div
-            role="tabpanel"
-            id={`tab-panel-${activeSection.title.toLowerCase()}`}
-            aria-labelledby={`tab-${activeSection.title.toLowerCase()}`}
-            className={`prose prose-lg dark:prose-invert max-w-none
-            prose-headings:text-gray-900 dark:prose-headings:text-white
-            prose-p:text-gray-700 dark:prose-p:text-gray-300
-            prose-strong:text-gray-900 dark:prose-strong:text-white
-            prose-ol:list-decimal prose-ol:pl-6 prose-ol:space-y-2
-            prose-ul:list-disc prose-ul:pl-6 prose-ul:space-y-2
-            prose-li:text-gray-700 dark:prose-li:text-gray-300
-            prose-li:marker:text-gray-500 dark:prose-li:marker:text-gray-400
-            prose-code:text-gray-900 dark:prose-code:text-gray-100
-            prose-pre:bg-gray-100 dark:prose-pre:bg-gray-900
-            prose-table:border-collapse
-            prose-th:border prose-th:border-gray-300 dark:prose-th:border-gray-600
-            prose-td:border prose-td:border-gray-300 dark:prose-td:border-gray-600
-            ${activeSection.title === 'Photos' ? 'prose-img:w-full prose-img:max-w-2xl prose-img:mx-auto' : ''}
-          `}>
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
-              {activeSection.title}
-            </h2>
-            <ReactMarkdown
-              remarkPlugins={[remarkGfm]}
-              components={{
-                ol: ({ children, ...props }) => (
-                  <ol className="list-decimal pl-6 space-y-2 my-4" {...props}>
-                    {children}
-                  </ol>
-                ),
-                ul: ({ children, ...props }) => (
-                  <ul className="list-disc pl-6 space-y-2 my-4" {...props}>
-                    {children}
-                  </ul>
-                ),
-                li: ({ children, ...props }) => (
-                  <li className="text-gray-700 dark:text-gray-300" {...props}>
-                    {children}
-                  </li>
-                ),
-                img: ({ src, alt }) => {
-                  // Convert relative paths to public URLs
-                  const srcString = typeof src === 'string' ? src : '';
-                  const imageSrc = srcString.startsWith('./')
-                    ? `/recipes/${folderPath}/${srcString.replace('./', '')}`.replace(/\\/g, '/')
-                    : srcString;
-                  // Use img directly to avoid nesting issues with paragraphs
-                  return (
-                    <img
-                      src={imageSrc}
-                      alt={alt || 'Recipe image'}
-                      className="rounded-lg shadow-md w-full max-w-2xl mx-auto my-6 block"
-                      loading="lazy"
-                    />
-                  );
-                },
-                em: ({ children }) => {
-                  if (activeSection.title === 'Photos') {
-                    return (
-                      <span className="block text-center text-sm text-gray-600 dark:text-gray-400 italic my-2">
-                        {children}
-                      </span>
-                    );
-                  }
-                  return <em className="italic">{children}</em>;
-                },
-                h3: ({ children }) => (
-                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
-                    {children}
-                  </h3>
-                ),
-                h4: ({ children }) => (
-                  <h4 className="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">
-                    {children}
-                  </h4>
-                ),
-                code: ({ inline, children, ...props }: any) => {
-                  if (inline) {
-                    return (
-                      <code className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded text-sm" {...props}>
-                        {children}
-                      </code>
-                    );
-                  }
-                  return (
-                    <code className="block p-4 bg-gray-100 dark:bg-gray-900 rounded-lg overflow-x-auto" {...props}>
-                      {children}
-                    </code>
-                  );
-                },
-              }}
-            >
-              {activeSection.content}
-            </ReactMarkdown>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/components/RecipesClient.tsx b/components/RecipesClient.tsx
index 981fb39..4fb9e96 100644
--- a/components/RecipesClient.tsx
+++ b/components/RecipesClient.tsx
@@ -3,7 +3,7 @@
 import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
 import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import RecipeLayout from './RecipeLayout';
-import RecipeCard from './RecipeCard';
+import RecipeGridCard from './RecipeGridCard';
 import type { Recipe } from '@/lib/recipes';
 import type { FilterState } from '@/lib/types';
 
@@ -101,7 +101,7 @@ export default function RecipesClient({ recipes, categories, tags }: RecipesClie
       {filteredRecipes.length > 0 ? (
         <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
           {filteredRecipes.map((recipe) => (
-            <RecipeCard key={recipe.slug} recipe={recipe} />
+            <RecipeGridCard key={recipe.slug} recipe={recipe} />
           ))}
         </div>
       ) : (
diff --git a/lib/parseRecipe.ts b/lib/parseRecipe.ts
deleted file mode 100644
index e77129a..0000000
--- a/lib/parseRecipe.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-export interface RecipeSection {
-  title: string;
-  content: string;
-}
-
-export function parseRecipeSections(markdownContent: string): RecipeSection[] {
-  const lines = markdownContent.split('\n');
-  const sections: RecipeSection[] = [];
-  let currentSection: RecipeSection | null = null;
-  let inFrontmatter = false;
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-
-    if (line.trim() === '---') {
-      inFrontmatter = !inFrontmatter;
-      continue;
-    }
-
-    if (inFrontmatter) {
-      continue;
-    }
-
-    if (line.startsWith('## ')) {
-      if (currentSection) {
-        sections.push(currentSection);
-      }
-      currentSection = {
-        title: line.replace('## ', '').trim(),
-        content: '',
-      };
-    } else if (currentSection) {
-      currentSection.content += line + '\n';
-    }
-  }
-
-  if (currentSection) {
-    sections.push(currentSection);
-  }
-
-  return sections.map(section => ({
-    ...section,
-    content: section.content.trim(),
-  }));
-}
diff --git a/package-lock.json b/package-lock.json
index b6e701b..3257447 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@types/mdx": "^2.0.13",
         "gray-matter": "^4.0.3",
         "next": "^15.1.6",
+        "next-mdx-remote": "^6.0.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-markdown": "^10.1.0",
@@ -44,6 +45,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
@@ -4659,7 +4683,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -6050,6 +6073,28 @@
         }
       }
     },
+    "node_modules/next-mdx-remote": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/next-mdx-remote/-/next-mdx-remote-6.0.0.tgz",
+      "integrity": "sha512-cJEpEZlgD6xGjB4jL8BnI8FaYdN9BzZM4NwadPe1YQr7pqoWjg9EBCMv3nXBkuHqMRfv2y33SzUsuyNh9LFAQQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "@babel/code-frame": "^7.23.5",
+        "@mdx-js/mdx": "^3.0.1",
+        "@mdx-js/react": "^3.0.1",
+        "unist-util-remove": "^4.0.0",
+        "unist-util-visit": "^5.1.0",
+        "vfile": "^6.0.1",
+        "vfile-matter": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=7"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -8055,6 +8100,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-remove": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-remove/-/unist-util-remove-4.0.0.tgz",
+      "integrity": "sha512-b4gokeGId57UVRX/eVKej5gXqGlc9+trkORhFJpu9raqZkZhU0zm8Doi05+HaiBsMEIJowL+2WtQ5ItjsngPXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-stringify-position": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
@@ -8194,6 +8254,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vfile-matter": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/vfile-matter/-/vfile-matter-5.0.1.tgz",
+      "integrity": "sha512-o6roP82AiX0XfkyTHyRCMXgHfltUNlXSEqCIS80f+mbAyiQBE2fxtDVMtseyytGx75sihiJFo/zR6r/4LTs2Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "vfile": "^6.0.0",
+        "yaml": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vfile-message": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
@@ -8330,6 +8404,21 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yaml": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index a09b372..35f8397 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@types/mdx": "^2.0.13",
     "gray-matter": "^4.0.3",
     "next": "^15.1.6",
+    "next-mdx-remote": "^6.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
diff --git a/public/recipes/baking/apple-pie/apple-pie.mdx b/public/recipes/baking/apple-pie/apple-pie.mdx
index 57c7732..d77fb3d 100644
--- a/public/recipes/baking/apple-pie/apple-pie.mdx
+++ b/public/recipes/baking/apple-pie/apple-pie.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Apple Pie
-
-Just like grandma used to make?
+<RecipeCard>
 
 ## Photos
 
@@ -66,3 +64,5 @@ Just like grandma used to make?
 ## References
 
 - Reference Recipe **[HERE](https://sallysbakingaddiction.com/apple-pie-recipe/)**
+
+</RecipeCard>
diff --git a/public/recipes/cajun/gumbo/gumbo.mdx b/public/recipes/cajun/gumbo/gumbo.mdx
index 5618fe0..9bad735 100644
--- a/public/recipes/cajun/gumbo/gumbo.mdx
+++ b/public/recipes/cajun/gumbo/gumbo.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Chicken, Sausage, and Shrimp Gumbo
-
-A dish with Cajun and Creole roots made with chicken, sausage, and shrimp.
+<RecipeCard>
 
 ## Photos
 
@@ -75,3 +73,5 @@ The roux should be a dark brown color and have a nutty aroma.
 ## References
 
 - Reference Recipe **[HERE](https://southernbite.com/chicken-sausage-and-shrimp-gumbo/)**
+
+</RecipeCard>
diff --git a/public/recipes/chinese/broccoli-beef-in-oyster-sauce/broccoli-beef-in-oyster-sauce.mdx b/public/recipes/chinese/broccoli-beef-in-oyster-sauce/broccoli-beef-in-oyster-sauce.mdx
index 04662b7..ab50a56 100644
--- a/public/recipes/chinese/broccoli-beef-in-oyster-sauce/broccoli-beef-in-oyster-sauce.mdx
+++ b/public/recipes/chinese/broccoli-beef-in-oyster-sauce/broccoli-beef-in-oyster-sauce.mdx
@@ -15,9 +15,9 @@ display: true
 displayPhoto: ""
 ---
 
-# Broccoli Beef in Oyster Sauce
+lasdfkjlkejflwkejflwkejflk
 
-Broccoli Beef! Just like the restaurant!
+<RecipeCard>
 
 ## Photos
 
@@ -64,3 +64,5 @@ Broccoli Beef! Just like the restaurant!
 ## References
 
 - Reference Recipe **[HERE](https://www.youtube.com/watch?v=fSO83XlKcPI)**
+
+</RecipeCard>
diff --git a/public/recipes/chinese/egg-flower-soup/egg-flower-soup.mdx b/public/recipes/chinese/egg-flower-soup/egg-flower-soup.mdx
index ff65cf4..3c06079 100644
--- a/public/recipes/chinese/egg-flower-soup/egg-flower-soup.mdx
+++ b/public/recipes/chinese/egg-flower-soup/egg-flower-soup.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Egg Flower Soup
-
-The classic egg drop soup. Tastes pretty similar to the store, and super easy to make!
+<RecipeCard>
 
 ## Photos
 
@@ -64,3 +62,5 @@ Also give the cooking wine addition a try (thanks, mom)
 ## References
 
 - Reference Recipe [HERE](https://thewoksoflife.com/egg-drop-soup/)
+
+</RecipeCard>
diff --git a/public/recipes/chinese/tangy-runyan-eggroll/tangy-runyan-eggroll.mdx b/public/recipes/chinese/tangy-runyan-eggroll/tangy-runyan-eggroll.mdx
index 9b35ee6..0ec7333 100644
--- a/public/recipes/chinese/tangy-runyan-eggroll/tangy-runyan-eggroll.mdx
+++ b/public/recipes/chinese/tangy-runyan-eggroll/tangy-runyan-eggroll.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Tangy Runyan Eggroll
-
-A delicious fusion-style eggroll that can be fried as an eggroll or adapted into wontons.
+<RecipeCard>
 
 ## Photos
 
@@ -74,3 +72,5 @@ These make excellent additions to soup!
 ## References
 
 - Thanks to my sister for providing the recipe!
+
+</RecipeCard>
diff --git a/public/recipes/drinks/peach-simple-syrup/peach-simple-syrup.mdx b/public/recipes/drinks/peach-simple-syrup/peach-simple-syrup.mdx
index db7ba94..549dc56 100644
--- a/public/recipes/drinks/peach-simple-syrup/peach-simple-syrup.mdx
+++ b/public/recipes/drinks/peach-simple-syrup/peach-simple-syrup.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Peach Simple Syrup
-
-A wonderfully fruity, sweet, and versatile syrup perfect for adding a peachy twist to cocktails, mocktails, iced tea, and lemonade.
+<RecipeCard>
 
 ## Photos
 
@@ -54,3 +52,5 @@ This peach syrup is perfect for cocktails (like a Peach Mojito or Bellini), mock
 ## References
 
 - Reference Recipe **[HERE](https://www.alphafoodie.com/how-to-make-peach-simple-syrup/)**
+
+</RecipeCard>
diff --git a/public/recipes/example/example-recipe-1/example-recipe-1.mdx b/public/recipes/example/example-recipe-1/example-recipe-1.mdx
index b160ebd..71ec800 100644
--- a/public/recipes/example/example-recipe-1/example-recipe-1.mdx
+++ b/public/recipes/example/example-recipe-1/example-recipe-1.mdx
@@ -15,10 +15,10 @@ display: false
 displayPhoto: "./assets/not-found.svg"
 ---
 
-# Classic Chicken Parmesan
-
 A beloved Italian-American comfort food that combines crispy breaded chicken cutlets with rich marinara sauce and gooey melted cheese. Perfect for a family dinner or special occasion.
 
+<RecipeCard>
+
 ## Photos
 
 ![Finished chicken parmesan on a white plate](./assets/not-found.svg)
@@ -96,3 +96,5 @@ A beloved Italian-American comfort food that combines crispy breaded chicken cut
 - Adapted from traditional Italian-American recipes
 - Inspired by *The Silver Spoon* Italian cookbook
 - Reference Recipe **[HERE](https://www.example.com)**
+
+</RecipeCard>
diff --git a/public/recipes/example/example-recipe-2/example-recipe-2.mdx b/public/recipes/example/example-recipe-2/example-recipe-2.mdx
index 3fa99ee..1954cb2 100644
--- a/public/recipes/example/example-recipe-2/example-recipe-2.mdx
+++ b/public/recipes/example/example-recipe-2/example-recipe-2.mdx
@@ -15,10 +15,10 @@ display: false
 displayPhoto: "./assets/not-found.svg"
 ---
 
-# Perfect Chocolate Chip Cookies
-
 The ultimate chocolate chip cookie recipe that delivers crispy edges, chewy centers, and loads of melty chocolate chips in every bite. This recipe has been tested and perfected to create bakery-style cookies at home.
 
+<RecipeCard>
+
 ## Photos
 
 ![Stack of chocolate chip cookies](./assets/not-found.svg)
@@ -109,3 +109,5 @@ The ultimate chocolate chip cookie recipe that delivers crispy edges, chewy cent
 
 - Based on the classic Nestlé Toll House recipe
 - Reference Recipe **[HERE](https://www.example.com)**
+
+</RecipeCard>
diff --git a/public/recipes/indian/brown-lentils/brown-lentils.mdx b/public/recipes/indian/brown-lentils/brown-lentils.mdx
index 1691fd2..e03f6d3 100644
--- a/public/recipes/indian/brown-lentils/brown-lentils.mdx
+++ b/public/recipes/indian/brown-lentils/brown-lentils.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Lentils"
-slug: "brown-lentils"
+slug: "lentils"
 date: "2026-02-10"
 lastUpdated: "2026-02-10"
 category: "indian"
@@ -9,15 +9,17 @@ cookTime: 60
 prepTime: 30
 servings: 10
 author: "jake"
-description: "A neutral, lentil dish that complements any other curry or gravy. This recipe uses brown lentils (Whole Masoor Dal), as well as their hulled (red dal) and split (split red dal) forms. The whole dal retain their consistency, and the hulled and split dal thicken the gravy. Both are recommended to be used. Some substitutes for the whole dal can be done, I have used whole mung beans (Green Moong Dal) as a replacement, and any split dal can be used instead of the split red dal."
+description: "A neutral lentil dish that can complement other curries or be a meal on its own."
 featured: false
 display: true
 displayPhoto: ""
 ---
 
-# Lentils
+This recipe uses brown lentils (whole Masoor Dal), as well as their hulled (red Dal) and split (split red Dal) forms. 
 
-A neutral, lentil dish that complements any other curry or gravy. This recipe uses brown lentils (Whole Masoor Dal), as well as their hulled (red dal) and split (split red dal) forms. The whole dal retain their consistency, and the hulled and split dal thicken the gravy. Both are recommended to be used. Some substitutes for the whole dal can be done, I have used whole mung beans (Green Moong Dal) as a replacement, and any split dal can be used instead of the split red dal.
+The whole dal retain their consistency, and the hulled and split dal thicken the gravy. Both are recommended to be used. Some substitutes for the whole dal can be done, I have used whole mung beans (Green Moong Dal) as a replacement, and any split dal can be used instead of the split red dal.
+
+<RecipeCard>
 
 ## Photos
 
@@ -75,3 +77,5 @@ A neutral, lentil dish that complements any other curry or gravy. This recipe us
 ## References
 
 - Reference Recipe **[HERE](https://www.indianhealthyrecipes.com/brown-lentils/)**
+
+</RecipeCard>
diff --git a/public/recipes/indian/chana-masala/chana-masala.mdx b/public/recipes/indian/chana-masala/chana-masala.mdx
index 9dd86d6..019f42d 100644
--- a/public/recipes/indian/chana-masala/chana-masala.mdx
+++ b/public/recipes/indian/chana-masala/chana-masala.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Chana Masala
-
-A classic chickpea recipe with a rich, tomato-based gravy.
+<RecipeCard>
 
 ## Photos
 
@@ -84,3 +82,5 @@ A classic chickpea recipe with a rich, tomato-based gravy.
 ## References
 
 - Reference Recipe **[HERE](https://www.indianhealthyrecipes.com/chana-masala/)**
+
+</RecipeCard>
diff --git a/public/recipes/indian/chicken-tikka-masala/chicken-tikka-masala.mdx b/public/recipes/indian/chicken-tikka-masala/chicken-tikka-masala.mdx
index b0c3077..7f24888 100644
--- a/public/recipes/indian/chicken-tikka-masala/chicken-tikka-masala.mdx
+++ b/public/recipes/indian/chicken-tikka-masala/chicken-tikka-masala.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: "./assets/chicken-tikka-masala.jpg"
 ---
 
-# Chicken Tikka Masala
-
-A classic chicken recipe with a rich, tomato-based gravy.
+<RecipeCard>
 
 ## Photos
 
@@ -76,3 +74,5 @@ A classic chicken recipe with a rich, tomato-based gravy.
 ## References
 
 - Reference Recipe **[HERE](https://cafedelites.com/chicken-tikka-masala/)**
+
+</RecipeCard>
diff --git a/public/recipes/indian/palak-paneer/palak-paneer.mdx b/public/recipes/indian/palak-paneer/palak-paneer.mdx
index 0a8e624..7b66c23 100644
--- a/public/recipes/indian/palak-paneer/palak-paneer.mdx
+++ b/public/recipes/indian/palak-paneer/palak-paneer.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: "./assets/palak-paneer.jpg"
 ---
 
-# Palak Paneer
-
-A great vegetarian option with a lot of fiber.
+<RecipeCard>
 
 ## Photos
 
@@ -74,3 +72,5 @@ A great vegetarian option with a lot of fiber.
 ## References
 
 - Reference Recipe **[HERE](https://www.indianhealthyrecipes.com/palak-paneer-recipe-easy-paneer-recipes-step-by-step-pics/)**
+
+</RecipeCard>
diff --git a/public/recipes/italian/chicken-parmesan/chicken-parmesan.mdx b/public/recipes/italian/chicken-parmesan/chicken-parmesan.mdx
index 5fad609..3618597 100644
--- a/public/recipes/italian/chicken-parmesan/chicken-parmesan.mdx
+++ b/public/recipes/italian/chicken-parmesan/chicken-parmesan.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Classic Chicken Parmigiana (Parmesan)
-
-Classic chicken parm can be made with panko breadcrumbs or homemade ones.
+<RecipeCard>
 
 ## Photos
 
@@ -75,3 +73,5 @@ Classic chicken parm can be made with panko breadcrumbs or homemade ones.
 ## References
 
 - Reference Recipe **[HERE](https://www.homemadeitaliancooking.com/chicken-parmesan/)**
+
+</RecipeCard>
diff --git a/public/recipes/italian/fusilli-with-vodka-basil-parmesan/fusilli-with-vodka-basil-parmesan.mdx b/public/recipes/italian/fusilli-with-vodka-basil-parmesan/fusilli-with-vodka-basil-parmesan.mdx
index 33dbaa6..5580dfc 100644
--- a/public/recipes/italian/fusilli-with-vodka-basil-parmesan/fusilli-with-vodka-basil-parmesan.mdx
+++ b/public/recipes/italian/fusilli-with-vodka-basil-parmesan/fusilli-with-vodka-basil-parmesan.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Vodka Pasta
-
-A recipe similar to the vodka pasta at Fiorella Polk.
+<RecipeCard>
 
 ## Photos
 
@@ -64,3 +62,5 @@ A recipe similar to the vodka pasta at Fiorella Polk.
 ## References
 
 - Reference Recipe **[HERE](https://www.bonappetit.com/recipe/fusilli-alla-vodka-basil-parmesan)**
+
+</RecipeCard>
diff --git a/public/recipes/italian/pizza-dough/pizza-dough.mdx b/public/recipes/italian/pizza-dough/pizza-dough.mdx
index 2978be8..6dad1c2 100644
--- a/public/recipes/italian/pizza-dough/pizza-dough.mdx
+++ b/public/recipes/italian/pizza-dough/pizza-dough.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Pizza Dough
-
-A standard pizza dough for pizza night.
+<RecipeCard>
 
 ## Photos
 
@@ -51,3 +49,5 @@ A standard pizza dough for pizza night.
 ## References
 
 - Reference Recipe **[HERE](https://www.crazyforcrust.com/the-ultimate-pizza-crust-recipe/)**
+
+</RecipeCard>
diff --git a/public/recipes/italian/pizza-sauce/pizza-sauce.mdx b/public/recipes/italian/pizza-sauce/pizza-sauce.mdx
index efc8c71..7c13df6 100644
--- a/public/recipes/italian/pizza-sauce/pizza-sauce.mdx
+++ b/public/recipes/italian/pizza-sauce/pizza-sauce.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Pizza Sauce
-
-A standard pizza sauce for pizza night.
+<RecipeCard>
 
 ## Photos
 
@@ -53,3 +51,5 @@ A standard pizza sauce for pizza night.
 ## References
 
 - Reference Recipe **[HERE](https://joyfoodsunshine.com/easy-homemade-pizza-sauce-recipe/)**
+
+</RecipeCard>
diff --git a/public/recipes/japanese/ajitsuke-tamago-ramen-egg/ajitsuke-tamago-ramen-egg.mdx b/public/recipes/japanese/ajitsuke-tamago-ramen-egg/ajitsuke-tamago-ramen-egg.mdx
index c642be4..7ed71fd 100644
--- a/public/recipes/japanese/ajitsuke-tamago-ramen-egg/ajitsuke-tamago-ramen-egg.mdx
+++ b/public/recipes/japanese/ajitsuke-tamago-ramen-egg/ajitsuke-tamago-ramen-egg.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Ajitsuke Tamago (Ramen Egg)
-
-Great on any kind of ramen!
+<RecipeCard>
 
 ## Photos
 
@@ -55,3 +53,5 @@ Great on any kind of ramen!
 ## References
 
 - Reference Recipe **[HERE](https://www.aspicyperspective.com/easy-ramen-egg-recipe-ajitsuke-tamago/)**
+
+</RecipeCard>
diff --git a/public/recipes/japanese/golden-curry-beef-stew/golden-curry-beef-stew.mdx b/public/recipes/japanese/golden-curry-beef-stew/golden-curry-beef-stew.mdx
index 6773a53..b333338 100644
--- a/public/recipes/japanese/golden-curry-beef-stew/golden-curry-beef-stew.mdx
+++ b/public/recipes/japanese/golden-curry-beef-stew/golden-curry-beef-stew.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Golden Curry Beef Stew
-
-The classic way to make Golden Curry packets into a rich beef stew.
+<RecipeCard>
 
 ## Photos
 
@@ -58,3 +56,5 @@ Macaroni salad goes great alongside the rice and curry stew.
 ## References
 
 - Reference Recipe **[HERE](https://www.waiyeehong.com/food-ingredients/sauces-oils/curry-sauces-and-pastes/golden-curry-mild)**
+
+</RecipeCard>
diff --git a/public/recipes/japanese/golden-curry-chicken/golden-curry-chicken.mdx b/public/recipes/japanese/golden-curry-chicken/golden-curry-chicken.mdx
index 606820f..155c05b 100644
--- a/public/recipes/japanese/golden-curry-chicken/golden-curry-chicken.mdx
+++ b/public/recipes/japanese/golden-curry-chicken/golden-curry-chicken.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Golden Curry Chicken
-
-A variant of the Golden Curry Beef recipe, this version uses chicken instead of beef, and coconut cream instead of beef stock for a Thai curry flavor.
+<RecipeCard>
 
 ## Photos
 
@@ -57,3 +55,5 @@ The coconut cream settles to the bottom of the can, make sure to re-mix it befor
 ## References
 
 - Reference Recipe **[HERE](https://www.recipetineats.com/golden-coconut-chicken-curry/)**
+
+</RecipeCard>
diff --git a/public/recipes/meat/beef-bourguignon/beef-bourguignon.mdx b/public/recipes/meat/beef-bourguignon/beef-bourguignon.mdx
index 774c8a0..e26d056 100644
--- a/public/recipes/meat/beef-bourguignon/beef-bourguignon.mdx
+++ b/public/recipes/meat/beef-bourguignon/beef-bourguignon.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Beef Bourguignon
-
-A classic French dish made with beef braised in red wine, often served with mushrooms and pearl onions.
+<RecipeCard>
 
 ## Photos
 
@@ -66,3 +64,5 @@ Serve with crusty bread or over mashed potatoes for a hearty meal.
 ## References
 
 - Reference Recipe **[HERE](https://cafedelites.com/beef-bourguignon/)**
+
+</RecipeCard>
diff --git a/public/recipes/meat/garlic-herb-butter-roast-turkey/garlic-herb-butter-roast-turkey.mdx b/public/recipes/meat/garlic-herb-butter-roast-turkey/garlic-herb-butter-roast-turkey.mdx
index 9b5837d..7892287 100644
--- a/public/recipes/meat/garlic-herb-butter-roast-turkey/garlic-herb-butter-roast-turkey.mdx
+++ b/public/recipes/meat/garlic-herb-butter-roast-turkey/garlic-herb-butter-roast-turkey.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Garlic Herb Butter Roast Turkey
-
-Happy Thanksgiving!
+<RecipeCard>
 
 ## Photos
 
@@ -66,3 +64,5 @@ Happy Thanksgiving!
 ## References
 
 - Reference Recipe **[HERE](https://cafedelites.com/roast-turkey/)**
+
+</RecipeCard>
diff --git a/public/recipes/meat/grilled-lemon-pepper-salmon/grilled-lemon-pepper-salmon.mdx b/public/recipes/meat/grilled-lemon-pepper-salmon/grilled-lemon-pepper-salmon.mdx
index 6c6dd31..db7c5c7 100644
--- a/public/recipes/meat/grilled-lemon-pepper-salmon/grilled-lemon-pepper-salmon.mdx
+++ b/public/recipes/meat/grilled-lemon-pepper-salmon/grilled-lemon-pepper-salmon.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Grilled Lemon Pepper Salmon
-
-Super simple! This recipe entry is more or less just a formality.
+<RecipeCard>
 
 ## Photos
 
@@ -49,3 +47,5 @@ Super simple! This recipe entry is more or less just a formality.
 ## References
 
 - Idk talk to my mom...
+
+</RecipeCard>
diff --git a/public/recipes/meat/jamaican-jerk-chicken/jamaican-jerk-chicken.mdx b/public/recipes/meat/jamaican-jerk-chicken/jamaican-jerk-chicken.mdx
index 733492e..06f73f9 100644
--- a/public/recipes/meat/jamaican-jerk-chicken/jamaican-jerk-chicken.mdx
+++ b/public/recipes/meat/jamaican-jerk-chicken/jamaican-jerk-chicken.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Jamaican Jerk Chicken
-
-Great chicken on a recommendation from a friend!
+<RecipeCard>
 
 ## Photos
 
@@ -55,3 +53,5 @@ Great chicken on a recommendation from a friend!
 ## References
 
 - Reference Recipe **[HERE](https://www.foodandwine.com/recipes/jamaican-jerk-chicken)**
+
+</RecipeCard>
diff --git a/public/recipes/meat/ribs-instant-pot/ribs-instant-pot.mdx b/public/recipes/meat/ribs-instant-pot/ribs-instant-pot.mdx
index 791ab7a..bae8f6f 100644
--- a/public/recipes/meat/ribs-instant-pot/ribs-instant-pot.mdx
+++ b/public/recipes/meat/ribs-instant-pot/ribs-instant-pot.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Instant Pot Ribs
-
-Juicy and smoky slow-cooked ribs for your grill to bless you with.
+<RecipeCard>
 
 ## Photos
 
@@ -63,3 +61,5 @@ Juicy and smoky slow-cooked ribs for your grill to bless you with.
 ## References
 
 - Reference Recipe **[HERE](https://www.wellplated.com/instant-pot-ribs/)**
+
+</RecipeCard>
diff --git a/public/recipes/meat/turkey-gravy/turkey-gravy.mdx b/public/recipes/meat/turkey-gravy/turkey-gravy.mdx
index cba7da0..565c876 100644
--- a/public/recipes/meat/turkey-gravy/turkey-gravy.mdx
+++ b/public/recipes/meat/turkey-gravy/turkey-gravy.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Turkey Gravy
-
-A great gravy recipe for Thanksgiving dinner!
+<RecipeCard>
 
 ## Photos
 
@@ -46,3 +44,5 @@ A great gravy recipe for Thanksgiving dinner!
 ## References
 
 - Reference Recipe **[HERE](https://cafedelites.com/turkey-gravy/)**
+
+</RecipeCard>
diff --git a/public/recipes/mexican/birria/birria.mdx b/public/recipes/mexican/birria/birria.mdx
index 588909f..3cf51ad 100644
--- a/public/recipes/mexican/birria/birria.mdx
+++ b/public/recipes/mexican/birria/birria.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Birria
-
-A rich and flavorful Mexican stew that can be enjoyed as a comforting dish or in delicious tacos.
+<RecipeCard>
 
 ## Photos
 
@@ -69,3 +67,5 @@ Straining after blending is important for a smooth texture in the consumé. Howe
 ## References
 
 - Reference Recipe **[HERE](https://www.isabeleats.com/authentic-birria/)**
+
+</RecipeCard>
diff --git a/public/recipes/mexican/elote/elote.mdx b/public/recipes/mexican/elote/elote.mdx
index 1de5405..912405d 100644
--- a/public/recipes/mexican/elote/elote.mdx
+++ b/public/recipes/mexican/elote/elote.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Elote (Mexican Street Corn)
-
-Classic Mexican street corn featuring grilled corn on the cob or in a cup.
+<RecipeCard>
 
 ## Photos
 
@@ -56,3 +54,5 @@ You can achieve a similar result by broiling the corn in your oven or carefully
 ## References
 
 - Reference Recipe **[HERE](https://www.seriouseats.com/mexican-street-corn-elotes-recipe)**
+
+</RecipeCard>
diff --git a/public/recipes/mexican/horchata/horchata.mdx b/public/recipes/mexican/horchata/horchata.mdx
index ddfc57c..4766ea7 100644
--- a/public/recipes/mexican/horchata/horchata.mdx
+++ b/public/recipes/mexican/horchata/horchata.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Horchata
-
-A cool, creamy, and spicy Agua Fresca that’s perfect over ice.
+<RecipeCard>
 
 ## Photos
 
@@ -56,3 +54,5 @@ Heed the instructions and blend in batches. Water easily escapes from the blende
 ## References
 
 - Reference Recipe **[HERE](https://www.muydelish.com/traditional-mexican-horchata/)**
+
+</RecipeCard>
diff --git a/public/recipes/mexican/mexican-rice/mexican-rice.mdx b/public/recipes/mexican/mexican-rice/mexican-rice.mdx
index b8c607f..da8bb39 100644
--- a/public/recipes/mexican/mexican-rice/mexican-rice.mdx
+++ b/public/recipes/mexican/mexican-rice/mexican-rice.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Mexican Rice
-
-A classic, fluffy, and flavorful restaurant-style Mexican rice, simmered with tomato sauce and spices. The perfect side dish for any Mexican meal.
+<RecipeCard>
 
 ## Photos
 
@@ -56,3 +54,5 @@ This rice is the perfect accompaniment to tacos, burritos, enchiladas, or any gr
 ## References
 
 - Reference Recipe **[HERE](https://www.allrecipes.com/recipe/27072/mexican-rice-ii/)**
+
+</RecipeCard>
diff --git a/public/recipes/mexican/pinto-beans/pinto-beans.mdx b/public/recipes/mexican/pinto-beans/pinto-beans.mdx
index e5adf93..f5256ce 100644
--- a/public/recipes/mexican/pinto-beans/pinto-beans.mdx
+++ b/public/recipes/mexican/pinto-beans/pinto-beans.mdx
@@ -15,10 +15,10 @@ display: true
 displayPhoto: ""
 ---
 
-# Pinto Beans
-
 Pinto beans that are great in a burrito on on their own.
 
+<RecipeCard>
+
 ## Photos
 
 ![Image Coming Soon](./assets/not-found.svg)
@@ -47,3 +47,13 @@ Pinto beans that are great in a burrito on on their own.
 ## References
 
 - Reference Recipe **[HERE](https://www.rachelcooks.com/instant-pot-pinto-beans/)**
+
+</RecipeCard>
+Stuff after recipe RecipeCard
+# Another H1
+is this renered
+## another h2
+is this h2 rendered
+
+![Image asdf Soon](./assets/not-found.svg)
+*Image Comasdfing Soon*asdf
\ No newline at end of file
diff --git a/public/recipes/salad/caesar-salad-dressing/caesar-salad-dressing.mdx b/public/recipes/salad/caesar-salad-dressing/caesar-salad-dressing.mdx
index f272301..040ab3b 100644
--- a/public/recipes/salad/caesar-salad-dressing/caesar-salad-dressing.mdx
+++ b/public/recipes/salad/caesar-salad-dressing/caesar-salad-dressing.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Caesar Salad Dressing
-
-A good Caesar salad dressing goes a long way, and making it yourself saves some money.
+<RecipeCard>
 
 ## Photos
 
@@ -52,3 +50,5 @@ A good Caesar salad dressing goes a long way, and making it yourself saves some
 ## References
 
 - Reference Recipe **[HERE](https://www.onceuponachef.com/recipes/caesar-salad-dressing.html)**
+
+</RecipeCard>
diff --git a/public/recipes/sides/cauliflower-mash/cauliflower-mash.mdx b/public/recipes/sides/cauliflower-mash/cauliflower-mash.mdx
index 5d173c7..77291ed 100644
--- a/public/recipes/sides/cauliflower-mash/cauliflower-mash.mdx
+++ b/public/recipes/sides/cauliflower-mash/cauliflower-mash.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Cauliflower Mash
-
-Silky mashed cauliflower that eats like mashed potatoes but healthier (?).
+<RecipeCard>
 
 ## Photos
 
@@ -56,3 +54,5 @@ Silky mashed cauliflower that eats like mashed potatoes but healthier (?).
 ## References
 
 - Reference Recipe **[HERE](https://www.seriouseats.com/cauliflower-puree-recipe)**
+
+</RecipeCard>
diff --git a/public/recipes/sides/pickled-red-onions/pickled-red-onions.mdx b/public/recipes/sides/pickled-red-onions/pickled-red-onions.mdx
index 8e5b410..89edd68 100644
--- a/public/recipes/sides/pickled-red-onions/pickled-red-onions.mdx
+++ b/public/recipes/sides/pickled-red-onions/pickled-red-onions.mdx
@@ -15,10 +15,10 @@ display: true
 displayPhoto: ""
 ---
 
-# Pickled Red Onions
-
 These are a great topping for ramen, sandwiches, charcuterie, salads, or anything that could use a fermented kick!
 
+<RecipeCard>
+
 ## Photos
 
 ![Image Coming Soon](./assets/not-found.svg)
@@ -53,3 +53,5 @@ These are a great topping for ramen, sandwiches, charcuterie, salads, or anythin
 ## References
 
 - Reference Recipe **[HERE](https://www.gimmesomeoven.com/quick-pickled-red-onions/)**
+
+</RecipeCard>
diff --git a/public/recipes/sides/sous-vide-mashed-potatoes/sous-vide-mashed-potatoes.mdx b/public/recipes/sides/sous-vide-mashed-potatoes/sous-vide-mashed-potatoes.mdx
index 0e4104c..d82d076 100644
--- a/public/recipes/sides/sous-vide-mashed-potatoes/sous-vide-mashed-potatoes.mdx
+++ b/public/recipes/sides/sous-vide-mashed-potatoes/sous-vide-mashed-potatoes.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Sous Vide Garlic Mashed Potatoes
-
-Perfect mashed potatoes, with no cleanup!
+<RecipeCard>
 
 ## Photos
 
@@ -57,3 +55,5 @@ Perfect mashed potatoes, with no cleanup!
 ## References
 
 - Reference Recipe **[HERE](https://www.youtube.com/watch?app=desktop&v=WRrtw9NwcIU&t=72s)**
+
+</RecipeCard>
diff --git a/public/recipes/soup/chicken-noodle-soup/chicken-noodle-soup.mdx b/public/recipes/soup/chicken-noodle-soup/chicken-noodle-soup.mdx
index 62bbe14..34d53d8 100644
--- a/public/recipes/soup/chicken-noodle-soup/chicken-noodle-soup.mdx
+++ b/public/recipes/soup/chicken-noodle-soup/chicken-noodle-soup.mdx
@@ -15,10 +15,10 @@ display: true
 displayPhoto: ""
 ---
 
-# Instant Pot Chicken Noodle Soup
-
 A comforting chicken noodle soup perfect for rainy or sick days. Made easy in the Instant Pot but can be adapted for stovetop cooking
 
+<RecipeCard>
+
 ## Photos
 
 ![Image Coming Soon](./assets/not-found.svg)
@@ -68,3 +68,5 @@ This recipe can be made on the stovetop by simmering the ingredients in a large
 ## References
 
 - Reference Recipe **[HERE](https://www.jocooks.com/recipes/instant-pot-chicken-noodle-soup/)**
+
+</RecipeCard>
diff --git a/public/recipes/vietnamese/pho/pho.mdx b/public/recipes/vietnamese/pho/pho.mdx
index 8109d55..c1673d2 100644
--- a/public/recipes/vietnamese/pho/pho.mdx
+++ b/public/recipes/vietnamese/pho/pho.mdx
@@ -15,9 +15,7 @@ display: true
 displayPhoto: ""
 ---
 
-# Pho (Vietnamese Noodle Soup)
-
-A traditional Vietnamese noodle soup with aromatic broth, rice noodles, and tender beef.
+<RecipeCard>
 
 ## Photos
 
@@ -74,3 +72,5 @@ Pho is traditionally served piping hot with plenty of fresh herbs and condiments
 ## References
 
 - Reference Recipe **[HERE](https://thewoksoflife.com/pho-vietnamese-noodle-soup/)**
+
+</RecipeCard>