diff --git a/gardens/azlen-elza.mdx b/gardens/azlen-elza.mdx
new file mode 100644
index 0000000..7bb3f32
--- /dev/null
+++ b/gardens/azlen-elza.mdx
@@ -0,0 +1,10 @@
+---
+title: Azlen Elza
+url: https://notes.azlen.me/
+image: /azlen1.png
+tools: ["Notion"]
+---
+
+![](/azlen1.png)
+![](/azlen3.png)
+![](/azlen2.png)
diff --git a/gardens/buster-benson.mdx b/gardens/buster-benson.mdx
index 98040e3..a54cc62 100644
--- a/gardens/buster-benson.mdx
+++ b/gardens/buster-benson.mdx
@@ -1,7 +1,10 @@
 ---
 title: Buster Benson
-image: https://via.placeholder.com/250
-tools: ['']
+image: /buster3.png
+tools: [""]
 ---
 
-This is an example post
+![](/buster1.png)
+![](/buster2.png)
+![](/buster3.png)
+![](/buster4.png)
diff --git a/gardens/shawn-wang.mdx b/gardens/shawn-wang.mdx
new file mode 100644
index 0000000..055be03
--- /dev/null
+++ b/gardens/shawn-wang.mdx
@@ -0,0 +1,10 @@
+---
+title: Shawn Wang
+url: https://www.swyx.io/
+image: /swyx1.png
+tools: ["svelte"]
+---
+
+![](/swyx1.png)
+![](/swyx2.png)
+![](/swyx3.png)
diff --git a/pages/directory.js b/pages/directory.js
index 40ca96a..0afab2f 100644
--- a/pages/directory.js
+++ b/pages/directory.js
@@ -1,9 +1,50 @@
 import Layout from "../components/Layout";
+import fs from "fs";
+import path from "path";
+import matter from "gray-matter";
+import Card from "../components/Card";
+import { motion } from "framer-motion";
+import { gardenFilePath, GARDENS_PATH } from "../utils/mdxUtils";
 
-export default function Directory() {
+export default function Directory({ gardens }) {
     return (
         <Layout>
-            <div>hello</div>
+            <motion.ul
+                initial="hidden"
+                animate="show"
+                variants={{
+                    hidden: { opacity: 0, y: 50 },
+                    show: {
+                        opacity: 1,
+                        y: 0,
+                        transition: {
+                            delay: 0.6,
+                            ease: "easeInOut",
+                            duration: 0.7,
+                        },
+                    },
+                }}
+                className="flex flex-wrap mt-24"
+            >
+                {gardens.map((garden) => (
+                    <Card garden={garden} />
+                ))}
+            </motion.ul>
         </Layout>
     );
 }
+
+export function getStaticProps() {
+    const gardens = gardenFilePath.map((filePath) => {
+        const source = fs.readFileSync(path.join(GARDENS_PATH, filePath));
+        const { content, data } = matter(source);
+
+        return {
+            content,
+            data,
+            filePath,
+        };
+    });
+
+    return { props: { gardens } };
+}
diff --git a/pages/index.js b/pages/index.js
index e0cc348..ced1042 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -55,7 +55,7 @@ export default function Index({ gardens }) {
                     }}
                     className="flex flex-wrap mt-24"
                 >
-                    {gardens.map((garden) => (
+                    {gardens.slice(0, 7).map((garden) => (
                         <Card garden={garden} />
                     ))}
                 </motion.ul>
diff --git a/public/azlen1.png b/public/azlen1.png
new file mode 100644
index 0000000..6001202
Binary files /dev/null and b/public/azlen1.png differ
diff --git a/public/azlen2.png b/public/azlen2.png
new file mode 100644
index 0000000..7bc5bbd
Binary files /dev/null and b/public/azlen2.png differ
diff --git a/public/azlen3.png b/public/azlen3.png
new file mode 100644
index 0000000..a551ca6
Binary files /dev/null and b/public/azlen3.png differ
diff --git a/public/buster1.png b/public/buster1.png
new file mode 100644
index 0000000..2fb4496
Binary files /dev/null and b/public/buster1.png differ
diff --git a/public/buster2.png b/public/buster2.png
new file mode 100644
index 0000000..0cdd78e
Binary files /dev/null and b/public/buster2.png differ
diff --git a/public/buster3.png b/public/buster3.png
new file mode 100644
index 0000000..a44beb9
Binary files /dev/null and b/public/buster3.png differ
diff --git a/public/buster4.png b/public/buster4.png
new file mode 100644
index 0000000..565f715
Binary files /dev/null and b/public/buster4.png differ
diff --git a/public/swyx1.png b/public/swyx1.png
new file mode 100644
index 0000000..021fe63
Binary files /dev/null and b/public/swyx1.png differ
diff --git a/public/swyx2.png b/public/swyx2.png
new file mode 100644
index 0000000..5c8efdd
Binary files /dev/null and b/public/swyx2.png differ
diff --git a/public/swyx3.png b/public/swyx3.png
new file mode 100644
index 0000000..e94068c
Binary files /dev/null and b/public/swyx3.png differ