diff --git a/.vscode/launch.json b/.vscode/launch.json
index 1b1eaefe..7226a6a5 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -11,7 +11,7 @@
         "name": "Next.js: debug client-side",
         "type": "pwa-chrome",
         "request": "launch",
-        "url": "http://localhost:3000"
+        "url": "http://localhost:3000/the-great-cook-up-website"
       },
       {
         "name": "Next.js: debug full stack",
diff --git a/app/[recipe]/page.tsx b/app/[recipe]/page.tsx
index a89a591f..764e9d3d 100644
--- a/app/[recipe]/page.tsx
+++ b/app/[recipe]/page.tsx
@@ -1,6 +1,8 @@
-import Link from 'next/link'
+//import Link from 'next/link'
 import { getFileList } from '../../services/github'
-import { marked } from 'marked'
+//import { marked } from 'marked'
+//import Markdown from 'marked-react'
+import { RecipeClient } from '../components/recipe-client'
 
 export async function generateStaticParams() {
   const files = await getFileList()
@@ -13,16 +15,10 @@ export async function generateStaticParams() {
 export default async function Recipe(props : any) {
   const url = `https://raw.githubusercontent.com/bit-shift-io/the-great-cook-up/main/${props.params.recipe}.md`
   const data = await fetch(url).then(r => r.text())
-  const tokens = marked.lexer(data)
-  const html = marked.parser(tokens)
+  //const tokens = marked.lexer(data)
+  //const html = marked.parser(tokens)
 
   return (
-    <main className="flex-grow justify-center items-center">
-      <Link href="/">
-        &#8592; Back
-      </Link>
-
-      <div dangerouslySetInnerHTML={{__html: html}}/>
-    </main>
+    <RecipeClient markdown={data}/>
   )
 }
diff --git a/app/components/recipe-client.tsx b/app/components/recipe-client.tsx
new file mode 100644
index 00000000..07cdcace
--- /dev/null
+++ b/app/components/recipe-client.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import Link from 'next/link'
+import Markdown, { ReactRenderer } from 'marked-react'
+import { ReactNode } from 'react';
+
+// https://marked.js.org/using_pro#renderer
+const renderer : Partial<ReactRenderer> = {
+    heading(children: ReactNode, level: HeadingLevels) {
+        return (
+            <h1 className="text-red-300">
+              {children}
+            </h1>
+        )
+    },
+
+    list(children: ReactNode, ordered: boolean) {
+        return (
+            <li className="text-blue-300">
+              {children}
+            </li>
+        )
+    },
+
+    paragraph(children: ReactNode) {
+        return (
+            <p className="text-green-300">
+              {children}
+            </p>
+        )
+    },
+
+    link(href: string, text: ReactNode) {
+        return (
+            <a className="text-yellow-300" href={href}>
+              {text}
+            </a>
+        )
+    }
+};
+
+
+export function RecipeClient(props : any) {
+  return (
+    <main className="flex-grow justify-center items-center">
+      <Link href="/">
+        &#8592; Back
+      </Link>
+
+      <Markdown value={props.markdown} renderer={renderer} />
+    </main>
+  )
+}
diff --git a/package.json b/package.json
index ab9e7ecb..d861581b 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "clsx": "^2.0.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.294.0",
-    "marked": "^11.0.0",
+    "marked-react": "^2.0.0",
     "next": "14.0.3",
     "react": "^18",
     "react-dom": "^18",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d14e2d5d..5a871989 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,9 +20,9 @@ dependencies:
   lucide-react:
     specifier: ^0.294.0
     version: 0.294.0(react@18.0.0)
-  marked:
-    specifier: ^11.0.0
-    version: 11.0.0
+  marked-react:
+    specifier: ^2.0.0
+    version: 2.0.0(react@18.0.0)
   next:
     specifier: 14.0.3
     version: 14.0.3(react-dom@18.0.0)(react@18.0.0)
@@ -1724,9 +1724,18 @@ packages:
       react: 18.0.0
     dev: false
 
-  /marked@11.0.0:
-    resolution: {integrity: sha512-2GsW34uXaFEGTQ/+3rCnNC6vUYTAgFuDLGl70v/aWinA5mIJtTrrFAmfbLOfVvgPyxXuDVL9He/7reCK+6j3Sw==}
-    engines: {node: '>= 18'}
+  /marked-react@2.0.0(react@18.0.0):
+    resolution: {integrity: sha512-Mp5HqfONf/RDqFtA+6xw2EjKkSbA8/xNPwyJ8ewLy/q3v21lRsPA7h+HUndVAW/yEIoebvcyzzSDpbjzL/xjZg==}
+    peerDependencies:
+      react: ^16.8.0 || >=17.0.0
+    dependencies:
+      marked: 6.0.0
+      react: 18.0.0
+    dev: false
+
+  /marked@6.0.0:
+    resolution: {integrity: sha512-7E3m/xIlymrFL5gWswIT4CheIE3fDeh51NV09M4x8iOc7NDYlyERcQMLAIHcSlrvwliwbPQ4OGD+MpPSYiQcqw==}
+    engines: {node: '>= 16'}
     hasBin: true
     dev: false