diff --git a/docs/projects.md b/docs/projects.md
index 21f5af18..d751c552 100644
--- a/docs/projects.md
+++ b/docs/projects.md
@@ -1,46 +1,57 @@
 # Ten Projects
 
+### ~avatar avatar
+
+Here are some cool projects that you can build with your micro:bit!
+
 ![](/static/mb/projects/all10.png)
 
-## [Flashing Heart](/projects/flashing-heart)
+### ~
 
-![](/static/mb/projects/a1-display.png)
 
-## [Smiley Buttons](/projects/smiley-buttons)
-
-![](/static/mb/projects/a2-buttons.png)
-
-## [Love Meter](/projects/love-meter)
-
-![](/static/mb/projects/a3-pins.png)
-
-## [Rock Paper Scissors](/projects/rock-paper-scissors)
-
-![](/static/mb/projects/a4-motion.png)
-
-## [Compass](/projects/compass)
-
-![](/static/mb/projects/a5-compass.png)
-
-## [Hack your headphones](/projects/hack-your-headphones)
-
-![](/static/mb/projects/a6-music.png)
-
-## [Banana keyboard](/projects/banana-keyboard)
-
-![](/static/mb/projects/a7-conductive.png)
-
-## [Telegraph](/projects/telegraph)
-
-![](/static/mb/projects/a8-network.png)
-
-## [Radio](/projects/radio)
-
-![](/static/mb/projects/a9-radio.png)
-
-## [Watch](/projects/the-watch)
-
-![](/static/mb/projects/a10-watch.png)
+```codecard
+[{
+  "name": "Flashing Heart",
+  "url":"/projects/flashing-heart",
+  "imageUrl": "/static/mb/projects/a1-display.png"
+},{
+  "name": "Smiley Buttons",
+  "url":"/projects/smiley-buttons",
+  "imageUrl": "/static/mb/projects/a2-buttons.png"
+},{
+  "name": "Love Meter",
+  "url":"/projects/lover-meter",
+  "imageUrl":"/static/mb/projects/a3-pins.png"
+},{
+  "name": "Rock Paper Scissors",
+  "url":"/projects/rock-paper-scissors",
+  "imageUrl":"/static/mb/projects/a4-motion.png"
+},{
+  "name": "Compass",
+  "url":"/projects/compass",
+  "imageUrl":"/static/mb/projects/a5-compass.png"
+},{
+  "name": "Hack your headphones",
+  "url":"/projects/hack-your-headphones",
+  "imageUrl":"/static/mb/projects/a6-music.png"
+},{
+  "name": "Banana keyboard",
+  "url":"/projects/banana-keyboard",
+  "imageUrl":"/static/mb/projects/a7-conductive.png"
+},{
+  "name": "Telegraph",
+  "url":"/projects/telegraph",
+  "imageUrl":"/static/mb/projects/a8-network.png"
+},{
+  "name": "Radio",
+  "url":"/projects/radio",
+  "imageUrl":"/static/mb/projects/a9-radio.png"
+},{
+  "name": "Watch",
+  "url":"/projects/the-watch",
+  "imageUrl":"/static/mb/projects/a10-watch.png"
+}]
+```