diff --git a/public/sitemap-0.xml b/public/sitemap-0.xml
index aa86fad..5f8e4d4 100644
--- a/public/sitemap-0.xml
+++ b/public/sitemap-0.xml
@@ -1,9 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://www.aaronjy.me/</loc><lastmod>2024-03-13T12:46:49.416Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.aaronjy.me/cv/</loc><lastmod>2024-03-13T12:46:49.417Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.aaronjy.me/fun/</loc><lastmod>2024-03-13T12:46:49.417Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.aaronjy.me/writing/</loc><lastmod>2024-03-13T12:46:49.417Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.aaronjy.me/fun/javascript-html5-tile-editor/</loc><lastmod>2024-03-13T12:46:49.417Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.aaronjy.me/writing/static-site-on-google-cloud/</loc><lastmod>2024-03-13T12:46:49.417Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.aaronjy.me/</loc><lastmod>2024-03-13T16:28:02.820Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.aaronjy.me/cv/</loc><lastmod>2024-03-13T16:28:02.821Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.aaronjy.me/fun/</loc><lastmod>2024-03-13T16:28:02.821Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.aaronjy.me/recipes/</loc><lastmod>2024-03-13T16:28:02.821Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.aaronjy.me/writing/</loc><lastmod>2024-03-13T16:28:02.821Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.aaronjy.me/recipes/manakish-pan/</loc><lastmod>2024-03-13T16:28:02.821Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.aaronjy.me/fun/javascript-html5-tile-editor/</loc><lastmod>2024-03-13T16:28:02.821Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.aaronjy.me/writing/static-site-on-google-cloud/</loc><lastmod>2024-03-13T16:28:02.821Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>
\ No newline at end of file
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 6e3084e..106b40e 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -9,8 +9,9 @@ function Header () {
       <nav>
         <Link href='/'>Home</Link>
         <Link href='/writing'>Writing</Link>
-        <Link href='/cv'>CV</Link>
+        <Link href='/recipes'>Recipes</Link>
         <Link href='/fun'>Fun</Link>
+        <Link href='/cv'>CV</Link>
       </nav>
     </header>
   )
diff --git a/src/layouts/DefaultLayout/DefaultLayout.jsx b/src/layouts/DefaultLayout/DefaultLayout.jsx
index 6b8e89f..2a65096 100644
--- a/src/layouts/DefaultLayout/DefaultLayout.jsx
+++ b/src/layouts/DefaultLayout/DefaultLayout.jsx
@@ -4,7 +4,7 @@ import style from './DefaultLayout.module.css'
 import Header from '@/components/Header/Header'
 import Footer from '@/components/Footer/Footer'
 
-import { Fira_Sans as FiraSans} from 'next/font/google'
+import { Fira_Sans as FiraSans } from 'next/font/google'
 
 const fontMain = FiraSans({ subsets: ['latin'], weight: ['400', '600'] })
 
diff --git a/src/lib/content.js b/src/lib/content.js
index 3940bc5..e11f710 100644
--- a/src/lib/content.js
+++ b/src/lib/content.js
@@ -21,3 +21,35 @@ export function getMarkdownEntry (path) {
     slug
   }
 }
+
+export function getStaticEntryPaths(contentPath) {
+  const entries = fs.readdirSync(contentPath, { withFileTypes: true })
+
+  const paths = entries.map((dirent) => ({
+    params: {
+      slug: toSlug(dirent.name),
+      contentPath: ';test'
+    }
+  }))
+
+  return {
+    fallback: false,
+    paths
+  }
+}
+
+export function getStaticEntryProps(contentPath, { params }) {
+  const path = `${contentPath}/${params.slug}.md`
+  const entry = getMarkdownEntry(path)
+
+  return { props: { ...entry } }
+}
+
+export function getStaticEntryListProps(contentPath, urlPrefix) {
+  const fun = fs.readdirSync(contentPath, { withFileTypes: true })
+  const entries = fun.map((dirent) =>
+    getMarkdownEntry(`${dirent.path}/${dirent.name}`)
+  )
+
+  return { props: { entries, urlPrefix } }
+}
\ No newline at end of file
diff --git a/src/pages/fun/[slug].js b/src/pages/fun/[slug].js
index 449dc77..477c63e 100644
--- a/src/pages/fun/[slug].js
+++ b/src/pages/fun/[slug].js
@@ -1,38 +1,17 @@
-import { toSlug } from '@/lib/helpers'
 import React from 'react'
-import fs from 'fs'
 import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
-import { getMarkdownEntry } from '@/lib/content'
 import Article from '@/components/Article/Article'
+import { getStaticEntryPaths, getStaticEntryProps } from '@/lib/content'
 
-function FunSingle ({ attributes, html }) {
+const CONTENT_PATH = "./content/fun"
+
+export const getStaticPaths = () => getStaticEntryPaths(CONTENT_PATH)
+export const getStaticProps = (ctx) => getStaticEntryProps(CONTENT_PATH, ctx)
+
+export default function FunSingle ({ attributes, html }) {
   return (
     <DefaultLayout>
       <Article attributes={attributes} html={html} />
     </DefaultLayout>
   )
 }
-
-export function getStaticPaths () {
-  const fun = fs.readdirSync('./content/fun', { withFileTypes: true })
-
-  const paths = fun.map((dirent) => ({
-    params: {
-      slug: toSlug(dirent.name)
-    }
-  }))
-
-  return {
-    fallback: false,
-    paths
-  }
-}
-
-export function getStaticProps ({ params }) {
-  const path = `./content/fun/${params.slug}.md`
-
-  const entry = getMarkdownEntry(path)
-  return { props: { ...entry } }
-}
-
-export default FunSingle
diff --git a/src/pages/fun/index.js b/src/pages/fun/index.js
index f2870e2..38c2ebf 100644
--- a/src/pages/fun/index.js
+++ b/src/pages/fun/index.js
@@ -1,11 +1,11 @@
 import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
 import React from 'react'
-import fs from 'fs'
-import Grid from '@/components/Grid/Grid'
 import Link from 'next/link'
-import { getMarkdownEntry } from '@/lib/content'
+import { getStaticEntryListProps } from '@/lib/content'
 
-function Fun ({ entries }) {
+export const getStaticProps = () => getStaticEntryListProps("./content/fun", "/fun/")
+
+export default function Fun ({ entries, urlPrefix }) {
   return (
     <DefaultLayout>
       <section>
@@ -14,28 +14,16 @@ function Fun ({ entries }) {
       </section>
 
       <section>
-        <Grid>
-          {entries.map((e) => (
-            <div key={e.attributes.title}>
-              <h2><Link href={'/fun/' + e.slug}>{e.attributes.title}</Link></h2>
-              <p>{e.attributes.desc}</p>
-              <Link href={'/fun/' + e.slug}>Read more</Link>
-            </div>
-          ))}
-        </Grid>
+        {entries.map((e) => (
+          <div key={e.attributes.title}>
+            <h2>
+              <Link href={`${urlPrefix}${e.slug}`}>{e.attributes.title}</Link>
+            </h2>
+            <p>{e.attributes.desc}</p>
+            <Link href={`${urlPrefix}${e.slug}`}>Read more</Link>
+          </div>
+        ))}
       </section>
     </DefaultLayout>
   )
 }
-
-export function getStaticProps () {
-  const fun = fs.readdirSync('./content/fun', { withFileTypes: true })
-
-  const entries = fun.map((dirent) =>
-    getMarkdownEntry(`${dirent.path}/${dirent.name}`)
-  )
-
-  return { props: { entries } }
-}
-
-export default Fun
diff --git a/src/pages/recipes/[slug].js b/src/pages/recipes/[slug].js
new file mode 100644
index 0000000..2ffa9e7
--- /dev/null
+++ b/src/pages/recipes/[slug].js
@@ -0,0 +1,17 @@
+import React from 'react'
+import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
+import Article from '@/components/Article/Article'
+import { getStaticEntryPaths, getStaticEntryProps } from '@/lib/content'
+
+const CONTENT_PATH = "./content/recipes"
+
+export const getStaticPaths = () => getStaticEntryPaths(CONTENT_PATH)
+export const getStaticProps = (ctx) => getStaticEntryProps(CONTENT_PATH, ctx)
+
+export default function RecipesSingle ({ attributes, html }) {
+  return (
+    <DefaultLayout>
+      <Article attributes={attributes} html={html} />
+    </DefaultLayout>
+  )
+}
diff --git a/src/pages/recipes/index.js b/src/pages/recipes/index.js
new file mode 100644
index 0000000..6613f8a
--- /dev/null
+++ b/src/pages/recipes/index.js
@@ -0,0 +1,29 @@
+import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
+import React from 'react'
+import Link from 'next/link'
+import { getStaticEntryListProps } from '@/lib/content'
+
+export const getStaticProps = () => getStaticEntryListProps("./content/recipes", "/recipes/")
+
+export default function Recipes ({ entries, urlPrefix }) {
+  return (
+    <DefaultLayout>
+      <section>
+        <h1>Recipes</h1>
+        <p>Some of my favourite recipes. Most of them are variations of recipes I have found online, but some I&apos;ve cooked up myself!</p>
+      </section>
+
+      <section>
+        {entries.map((e) => (
+          <div key={e.attributes.title}>
+            <h2>
+              <Link href={`${urlPrefix}${e.slug}`}>{e.attributes.title}</Link>
+            </h2>
+            <p>{e.attributes.desc}</p>
+            <Link href={`${urlPrefix}${e.slug}`}>Read more</Link>
+          </div>
+        ))}
+      </section>
+    </DefaultLayout>
+  )
+}
diff --git a/src/pages/recipes/index.js.disabled b/src/pages/recipes/index.js.disabled
deleted file mode 100644
index 79dd569..0000000
--- a/src/pages/recipes/index.js.disabled
+++ /dev/null
@@ -1,46 +0,0 @@
-// import Grid from '@/components/Grid/Grid'
-// import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
-// import React from 'react'
-// import path from 'path'
-// import fs from 'fs'
-
-// function Recipes ({ recipes }) {
-//   return (
-//     <DefaultLayout>
-//       <section>
-//         <h1>Recipes</h1>
-//         <Grid>
-//           {recipes.length &&
-//             recipes.map((recipe) => (
-//               <div key={recipe.name}>{recipe.name ?? 'unknown'}</div>
-//             ))}
-//         </Grid>
-//       </section>
-//     </DefaultLayout>
-//   )
-// }
-
-// export default Recipes
-
-// export async function getStaticProps () {
-//   const recipeDirents = await fs.promises
-//     .readdir('./content/recipes', {
-//       recursive: false,
-//       withFileTypes: true
-//     })
-
-//   const recipes = [{
-//     name: 'lol'
-//   }]
-
-//   for (const recipe of recipeDirents) {
-//     // const recipePath = path.join('./', recipe.path, recipe.name)
-//     // const recipeContent = fs.readFileSync(recipePath, { encoding: 'utf-8' })
-
-//     console.log(recipeFm)
-//   }
-
-//   return {
-//     props: { recipes }
-//   }
-// }
diff --git a/src/pages/writing/[slug].js b/src/pages/writing/[slug].js
index 9e16f46..508138a 100644
--- a/src/pages/writing/[slug].js
+++ b/src/pages/writing/[slug].js
@@ -1,38 +1,15 @@
-import { toSlug } from '@/lib/helpers'
 import React from 'react'
-import fs from 'fs'
 import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
-import { getMarkdownEntry } from '@/lib/content'
+import { getStaticEntryPaths, getStaticEntryProps } from '@/lib/content'
 import Article from '@/components/Article/Article'
 
-function FunSingle ({ attributes, html }) {
+export const getStaticPaths = () => getStaticEntryPaths("./content/writing")
+export const getStaticProps = (ctx) => getStaticEntryProps("./content/writing", ctx)
+
+export default function WritingSingle ({ attributes, html }) {
   return (
     <DefaultLayout>
       <Article attributes={attributes} html={html} />
     </DefaultLayout>
   )
 }
-
-export function getStaticPaths () {
-  const fun = fs.readdirSync('./content/writing', { withFileTypes: true })
-
-  const paths = fun.map((dirent) => ({
-    params: {
-      slug: toSlug(dirent.name)
-    }
-  }))
-
-  return {
-    fallback: false,
-    paths
-  }
-}
-
-export function getStaticProps ({ params }) {
-  const path = `./content/writing/${params.slug}.md`
-
-  const entry = getMarkdownEntry(path)
-  return { props: { ...entry } }
-}
-
-export default FunSingle
diff --git a/src/pages/writing/index.js b/src/pages/writing/index.js
index 492d405..8f846cd 100644
--- a/src/pages/writing/index.js
+++ b/src/pages/writing/index.js
@@ -1,10 +1,11 @@
 import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
 import React from 'react'
-import fs from 'fs'
 import Link from 'next/link'
-import { getMarkdownEntry } from '@/lib/content'
+import { getStaticEntryListProps } from '@/lib/content'
 
-function Fun ({ entries }) {
+export const getStaticProps = () => getStaticEntryListProps("./content/writing", "/writing/")
+
+export default function Writing ({ entries, urlPrefix }) {
   return (
     <DefaultLayout>
       <section>
@@ -19,25 +20,13 @@ function Fun ({ entries }) {
         {entries.map((e) => (
           <div key={e.attributes.title}>
             <h2>
-              <Link href={'/writing/' + e.slug}>{e.attributes.title}</Link>
+              <Link href={`${urlPrefix}${e.slug}`}>{e.attributes.title}</Link>
             </h2>
             <p>{e.attributes.desc}</p>
-            <Link href={'/writing/' + e.slug}>Read more</Link>
+            <Link href={`${urlPrefix}${e.slug}`}>Read more</Link>
           </div>
         ))}
       </section>
     </DefaultLayout>
   )
 }
-
-export function getStaticProps () {
-  const fun = fs.readdirSync('./content/writing', { withFileTypes: true })
-
-  const entries = fun.map((dirent) =>
-    getMarkdownEntry(`${dirent.path}/${dirent.name}`)
-  )
-
-  return { props: { entries } }
-}
-
-export default Fun