diff --git a/docs/courses/csintro.md b/docs/courses/csintro.md
index 9513d096b7f..c4d13a31f25 100644
--- a/docs/courses/csintro.md
+++ b/docs/courses/csintro.md
@@ -1,7 +1,6 @@
-# Introduction to Computer Science   
-# with Microsoft MakeCode Arcade
+# Introduction to Computer Science with Microsoft MakeCode Arcade
 
-Hello! Welcome to the student guide for *Introduction to Computer Science with Microsoft MakeCode Arcade*!
+Hello! Welcome to the student guide for **Introduction to Computer Science with Microsoft MakeCode Arcade**!
 
 This page will provide you with additional activities that you can complete in order to better understand the lessons in the official curriculum.  Please note, this page does not contain any answer keys or exemplar projects.
 
@@ -23,9 +22,9 @@ New to tutorials in MakeCode? Then follow the *Intro to MakeCode Arcade* tutoria
 ]
 ```
 
-## Skillmaps
+## Combined Activities by Unit
 
-Appropriate labs from each unit are aggregated below into skillmaps.
+Labs from each unit are grouped in the tiles below.
 
 <!--
 ### Blocks semester
@@ -34,27 +33,35 @@ Appropriate labs from each unit are aggregated below into skillmaps.
 ```codecard
 [
     {
+        "name": "Unit 0",
+        "description": "It's all about you!",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-0/lab0006",
+        "imageUrl": "https://arcade.makecode.com/api/S02325-67229-86604-38896/thumb"
+    },{
         "name": "Unit 1",
         "description": "Sprites",
-        "url": "/--skillmap#github:microsoft/pxt-arcade/docs/courses/csintro/blocks/unit1/skillmap",
+        "cardType": "link",
+        "url": "https://arcade.makecode.com/--skillmap#docs:/courses/csintro/blocks/unit-1/skillmap",
         "imageUrl": "https://arcade.makecode.com/api/S01708-98615-82961-41216/thumb"
     }, {
         "name": "Unit 2",
         "description": "Event handlers and variables",
-        "url": "/--skillmap#github:microsoft/pxt-arcade/docs/courses/csintro/blocks/unit2/skillmap",
+        "cardType": "link",
+        "url": "https://arcade.makecode.com/--skillmap#docs:/courses/csintro/blocks/unit-2/skillmap",
         "imageUrl": "https://arcade.makecode.com/api/S01440-65616-58259-55413/thumb"
     }, {
         "name": "Unit 3",
         "description": "Loops and arrays",
-        "url": "/--skillmap#github:microsoft/pxt-arcade/docs/courses/csintro/blocks/unit3/skillmap",
+        "cardType": "link",
+        "url": "https://arcade.makecode.com/--skillmap#docs:/courses/csintro/blocks/unit-3/skillmap",
         "imageUrl": "https://arcade.makecode.com/api/S24151-39662-06684-76747/thumb"
     }
 ]
 ```
 
-## Tutorials
+## Individual Tutorials
 
-The individual activities presented in the skillmaps above are also provided as standalone tutorials below.
+Individual activities from the tiles above are provided as standalone tutorials below.
 
 <!---
 ### Blocks semester
@@ -67,7 +74,8 @@ The individual activities presented in the skillmaps above are also provided as
     {
         "name": "Lab 0.6",
         "description": "It's all about you!",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-0/lab0006",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-0/lab0006",
+        "cardType": "tutorial",
         "imageUrl": "https://arcade.makecode.com/api/S02325-67229-86604-38896/thumb"
     }
 ]
@@ -80,42 +88,42 @@ The individual activities presented in the skillmaps above are also provided as
     {
         "name": "Lab 1.1 part 1",
         "description": "Blocks scavenger hunt",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0101-part1",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-1/lab0101-part1",
         "imageUrl": "https://arcade.makecode.com/api/S84007-40614-44053-34591/thumb"
     }, {
         "name": "Lab 1.1 part 2",
         "description": "Renaming variables",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0101-part2",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-1/lab0101-part2",
         "imageUrl": "/static/courses/csintro/S01.L01.01.P02.rename_variable.gif"
     }, {
         "name": "Lab 1.2",
         "description": "Sprites in the corners",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0102",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-1/lab0102",
         "imageUrl": "https://arcade.makecode.com/api/S48579-29555-87617-56521/thumb"
     }, {
         "name": "Lab 1.3",
         "description": "Moving sprites",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0103",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-1/lab0103",
         "imageUrl": "https://arcade.makecode.com/api/S96674-90076-64399-84406/thumb"
     }, {
         "name": "Lab 1.4 part 1",
         "description": "Start wherever",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0104-part1",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-1/lab0104-part1",
         "imageUrl": "https://arcade.makecode.com/api/S72191-59096-40476-83475/thumb"
     }, {
         "name": "Lab 1.4 part 2",
         "description": "Eat it all",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0104-part2",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-1/lab0104-part2",
         "imageUrl": "https://arcade.makecode.com/api/S72191-59096-40476-83475/thumb"
     }, {
         "name": "Lab 1.4 part 3",
         "description": "Points and Lives",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0104-part3",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-1/lab0104-part3",
         "imageUrl": "https://arcade.makecode.com/api/S72191-59096-40476-83475/thumb"
     }, {
         "name": "Lab 1.5",
         "description": "Eat some more",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0105",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-1/lab0105",
         "imageUrl": "https://arcade.makecode.com/api/S01708-98615-82961-41216/thumb"
     }
 ]
@@ -128,82 +136,82 @@ The individual activities presented in the skillmaps above are also provided as
     {
         "name": "Lab 2.1 part 1",
         "description": "Fire away",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part1",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part1",
         "imageUrl": "https://arcade.makecode.com/api/S02046-71712-34811-01331/thumb"
     }, {
         "name": "Lab 2.1 part 2",
         "description": "Here come the enemies",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part2",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part2",
         "imageUrl": "https://arcade.makecode.com/api/S02046-71712-34811-01331/thumb"
     }, {
         "name": "Lab 2.1 part 3",
         "description": "Villains be gone",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part3",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part3",
         "imageUrl": "https://arcade.makecode.com/api/S02046-71712-34811-01331/thumb"
     }, {
         "name": "Lab 2.1 part 4",
         "description": "Collision alert",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part4",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part4",
         "imageUrl": "https://arcade.makecode.com/api/S02046-71712-34811-01331/thumb"
     }, {
         "name": "Lab 2.1 part 5",
         "description": "Bonus: Pew-pew",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part5",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part5",
         "imageUrl": "https://arcade.makecode.com/api/S02046-71712-34811-01331/thumb"
     }, {
         "name": "Lab 2.2 part 1",
         "description": "Introduction to variables",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0202-part1",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0202-part1",
         "imageUrl": "https://arcade.makecode.com/api/S47184-28116-73351-38074/thumb"
     }, {
         "name": "Lab 2.2 part 2",
         "description": "Count the items",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0202-part2",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0202-part2",
         "imageUrl": "https://arcade.makecode.com/api/S47184-28116-73351-38074/thumb"
     }, {
         "name": "Lab 2.3",
         "description": "Variables and math",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0203",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0203",
         "imageUrl": "https://arcade.makecode.com/api/S61412-68869-78966-85149/thumb"
     }, {
         "name": "Lab 2.4",
         "description": "Silly story time",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0204",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0204",
         "imageUrl": "https://arcade.makecode.com/api/S01440-65616-58259-55413/thumb"
     }, {
         "name": "Lab 2.5 part 1",
         "description": "Pick a number",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0205-part1",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0205-part1",
         "imageUrl": "https://arcade.makecode.com/api/S67034-82374-71681-88847/thumb"
     }, {
         "name": "Lab 2.5 part 2",
         "description": "Even or odd",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0205-part2",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0205-part2",
         "imageUrl": "https://arcade.makecode.com/api/S99104-69456-21835-87580/thumb"
     }, {
         "name": "Lab 2.5 part 3",
         "description": "Magic four ball",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0205-part3",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0205-part3",
         "imageUrl": "https://arcade.makecode.com/api/S60868-62929-06905-31439/thumb"
     }, {
         "name": "Lab 2.6 part 1",
         "description": "Only room for three",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0206-part1",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0206-part1",
         "imageUrl": "https://arcade.makecode.com/api/S75841-44862-62246-25929/thumb"
     }, {
         "name": "Lab 2.6 part 2",
         "description": "Here come the enemies ... faster",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0206-part2",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0206-part2",
         "imageUrl": "https://arcade.makecode.com/api/S75841-44862-62246-25929/thumb"
     }, {
         "name": "Lab 2.6 part 3",
         "description": "Not too fast",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0206-part3",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0206-part3",
         "imageUrl": "https://arcade.makecode.com/api/S75841-44862-62246-25929/thumb"
     }, {
         "name": "Lab 2.6 part 4",
         "description": "Starting difficulty",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0206-part4",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-2/lab0206-part4",
         "imageUrl": "https://arcade.makecode.com/api/S75841-44862-62246-25929/thumb"
     }
 ]
@@ -216,22 +224,22 @@ The individual activities presented in the skillmaps above are also provided as
     {
         "name": "Lab 3.1 part 1",
         "description": "The repeat loop",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-3/lab0301-part1",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-3/lab0301-part1",
         "imageUrl": "https://arcade.makecode.com/api/S58596-07767-54155-54916/thumb"
     }, {
         "name": "Lab 3.1 part 2",
         "description": "The for loop",
-        "url": "/#tutorial:/courses/csintro/blocks/unit-3/lab0301-part2",
+        "url": "http://arcade.makecode.com/#tutorial:/courses/csintro/blocks/unit-3/lab0301-part2",
         "imageUrl": "https://arcade.makecode.com/api/S04739-13054-75441-03012/thumb"
     }, {
         "name": "Lab 3.4",
         "description": "High scores",
-        "url": "/--skillmap#github:microsoft/pxt-arcade/docs/courses/csintro/blocks/unit3/lab-3-4-skillmap",
+        "url": "https://arcade.makecode.com/--skillmap#docs:/courses/csintro/blocks/unit-3/lab-3-4-skillmap",
         "imageUrl": "https://arcade.makecode.com/api/S61379-50555-16499-36625/thumb"
     }, {
         "name": "Lab 3.5",
         "description": "Animated sprites",
-        "url": "/--skillmap#github:microsoft/pxt-arcade/docs/courses/csintro/blocks/unit3/lab-3-5-skillmap",
+        "url": "https://arcade.makecode.com/--skillmap#docs:/courses/csintro/blocks/unit-3/lab-3-5-skillmap",
         "imageUrl": "https://arcade.makecode.com/api/S24151-39662-06684-76747/thumb"
     }
 ]
diff --git a/docs/courses/csintro/blocks/unit-1/skillmap.md b/docs/courses/csintro/blocks/unit-1/skillmap.md
index 6314cd2cecd..88c87f10d39 100644
--- a/docs/courses/csintro/blocks/unit-1/skillmap.md
+++ b/docs/courses/csintro/blocks/unit-1/skillmap.md
@@ -4,12 +4,15 @@
 * description: Learn about sprites, movement, and collisions in this skillmap.
 * primarycolor: #2EA9B0
 * secondarycolor: #F392BD
-* tertiarycolor: #83C252
+* tertiarycolor: #fdf3e0
 * highlightcolor: #FAED28
 * alternatesources: github:https://github.com/microsoft/pxt-arcade/docs/courses/csintro/blocks/unit-1/skillmap.md
+* bannerUrl: https://arcade.makecode.com/api/S01708-98615-82961-41216/thumb
+* backgroundurl: https://github.com/kiki-lee/skillmap/blob/master/lab_bg.png?raw=true
 
 ## lab-01-01
 
+* layout: manual
 * name: MakeCode Arcade scavenger hunt
 * description: Learn more about MakeCode Arcade with a scavenger hunt!
 
@@ -20,6 +23,8 @@
 * type: tutorial
 * next: lab-01-01-part-2
 * url: https://github.com/microsoft/pxt-arcade/docs/courses/csintro/blocks/unit-1/lab0101-part1
+* imageUrl: https://arcade.makecode.com/api/S84007-40614-44053-34591/thumb
+* position: 0 0
 
 ### lab-01-01-part-2
 
@@ -27,9 +32,12 @@
 * description: Follow these steps to give your variables meaningful names.
 * type: tutorial
 * url: https://github.com/microsoft/pxt-arcade/docs/courses/csintro/blocks/unit-1/lab0101-part2
+* imageUrl: /static/courses/csintro/S01.L01.01.P02.rename_variable.gif
+* position: 1 0
 
 ## lab-01-02-and-03
 
+* layout: manual
 * name: Sprites, sprites, and more sprites!
 * description: Learn about sprites, movement, and sprite kinds on this path.
 
@@ -40,6 +48,8 @@
 * type: tutorial
 * next: lab-01-03
 * url: https://github.com/microsoft/pxt-arcade/docs/courses/csintro/blocks/unit-1/lab0102
+* imageUrl: https://arcade.makecode.com/api/S48579-29555-87617-56521/thumb
+* position: 0 1
 
 ### lab-01-03
 
@@ -47,9 +57,12 @@
 * description: Use the controller to move the hero sprite around the screen!
 * type: tutorial
 * url: https://github.com/microsoft/pxt-arcade/docs/courses/csintro/blocks/unit-1/lab0103
+* imageUrl: https://arcade.makecode.com/api/S96674-90076-64399-84406/thumb
+* position: 1 1
 
 ## lab-01-04-and-05
 
+* layout: manual
 * name: Eat it all! and Eat some more!
 * description: In these labs, we will write a game where the player must eat all the food
 which appears--while avoiding an enemy which bounces around the screen!
@@ -61,6 +74,8 @@ which appears--while avoiding an enemy which bounces around the screen!
 * type: tutorial
 * next: lab-01-04-part2
 * url: https://github.com/microsoft/pxt-arcade/docs/courses/csintro/blocks/unit-1/lab0104-part1.md
+* imageUrl: https://arcade.makecode.com/api/S72191-59096-40476-83475/thumb
+* position: 0 2
 
 ### lab-01-04-part2
 
@@ -69,6 +84,8 @@ which appears--while avoiding an enemy which bounces around the screen!
 * type: tutorial
 * next: lab-01-04-part3
 * url: https://github.com/microsoft/pxt-arcade/docs/courses/csintro/blocks/unit-1/lab0104-part2.md
+* imageUrl: https://arcade.makecode.com/api/S72191-59096-40476-83475/thumb
+* position: 1 2
 
 ### lab-01-04-part3
 
@@ -77,13 +94,18 @@ which appears--while avoiding an enemy which bounces around the screen!
 * type: tutorial
 * next: lab-01-04-finish
 * url: https://github.com/microsoft/pxt-arcade/docs/courses/csintro/blocks/unit-1/lab0104-part3.md
+* imageUrl: https://arcade.makecode.com/api/S72191-59096-40476-83475/thumb
+* position: 2 2
 
 ### lab-01-04-finish
 
-* name: End of Lab 1.4.
+* name: End of Lab 1.4
 * type: certificate
+* url: /static/skillmap/certificates/lab-1-cert.pdf
+* imageUrl: /static/skillmap/certificates/lab-1-cert.jpg
 * kind: completion
 * next: lab-01-05
+* position: 3 2
 
 ### lab-01-05
 
@@ -91,3 +113,5 @@ which appears--while avoiding an enemy which bounces around the screen!
 * description: Add food sprites to the screen at random locations
 * type: tutorial
 * url: https://github.com/microsoft/pxt-arcade/docs/courses/csintro/blocks/unit-1/lab0105.md
+* imageUrl: https://arcade.makecode.com/api/S01708-98615-82961-41216/thumb
+* position: 4 2
diff --git a/docs/hour-of-code/all.md b/docs/hour-of-code/all.md
index 65d2e5ba8f8..a8ec9a70ad9 100644
--- a/docs/hour-of-code/all.md
+++ b/docs/hour-of-code/all.md
@@ -2,20 +2,15 @@
 
 Join us in celebrating Computer Science Education Week by playing, designing, and coding your very own retro arcade games!
 
-## New for 2023
+## New for 2024
 
 ```codecard
 [
     {
-        "name": "Sparks Flying",
-        "description": "Create a game that challenges you to light a fire to keep yourself warm, but be careful! It's not as easy as it sounds.",
-        "url": "https://arcade.makecode.com/--skillmap#docs:/skillmap/sparks",
-        "imageUrl": "/static/hour-of-code/2023/sparks.gif"
-    }, {
-        "name": "Sparks Flying (Jr)",
-        "description": "This simplified version of Sparks Flying allows students as young as kindergarten to experience the joy of coding their own game in MakeCode Arcade.",
-        "url": "/#tutorial:/tutorials/sparks-jr",
-        "imageUrl": "/static/hour-of-code/2023/jr.png"
+        "name": "Inside Out 2",
+        "description": "Create a bubble popping game, featuring the stars of Disney and Pixar's Inside Out 2.",
+        "url": "https://arcade.makecode.com/#tutorial:/tutorials/bubbles",
+        "imageUrl": "/static/tutorials/bubbles/card.jpg"
     }
 ]
 ```
@@ -26,6 +21,16 @@ Join us in celebrating Computer Science Education Week by playing, designing, an
 ```codecard
 [
     {
+        "name": "Sparks Flying",
+        "description": "Create a game that challenges you to light a fire to keep yourself warm, but be careful! It's not as easy as it sounds.",
+        "url": "https://arcade.makecode.com/--skillmap#docs:/skillmap/sparks",
+        "imageUrl": "/static/hour-of-code/2023/sparks.gif"
+    }, {
+        "name": "Sparks Flying (Jr)",
+        "description": "This simplified version of Sparks Flying allows students as young as kindergarten to experience the joy of coding their own game in MakeCode Arcade.",
+        "url": "/#tutorial:/tutorials/sparks-jr",
+        "imageUrl": "/static/hour-of-code/2023/jr.png"
+    },{
         "name": "2022 Hour of Code",
         "description": "Code your own classroom carnival with games like Whack-the-Mole, Burstin' Balloons, and Target Practice",
         "url": "/hour-of-code-2022",
diff --git a/docs/static/skillmap/certificates/lab-1-cert.jpg b/docs/static/skillmap/certificates/lab-1-cert.jpg
new file mode 100644
index 00000000000..b117f22bc36
Binary files /dev/null and b/docs/static/skillmap/certificates/lab-1-cert.jpg differ
diff --git a/docs/static/skillmap/certificates/lab-1-cert.pdf b/docs/static/skillmap/certificates/lab-1-cert.pdf
new file mode 100644
index 00000000000..71367ac1166
Binary files /dev/null and b/docs/static/skillmap/certificates/lab-1-cert.pdf differ
diff --git a/docs/static/skillmap/certificates/lab-2-cert.jpg b/docs/static/skillmap/certificates/lab-2-cert.jpg
new file mode 100644
index 00000000000..f78590ced4b
Binary files /dev/null and b/docs/static/skillmap/certificates/lab-2-cert.jpg differ
diff --git a/docs/static/skillmap/certificates/lab-2-cert.pdf b/docs/static/skillmap/certificates/lab-2-cert.pdf
new file mode 100644
index 00000000000..6d1524be939
Binary files /dev/null and b/docs/static/skillmap/certificates/lab-2-cert.pdf differ
diff --git a/docs/static/skillmap/certificates/lab-3-cert.jpg b/docs/static/skillmap/certificates/lab-3-cert.jpg
new file mode 100644
index 00000000000..25af9240ec0
Binary files /dev/null and b/docs/static/skillmap/certificates/lab-3-cert.jpg differ
diff --git a/docs/static/skillmap/certificates/lab-3-cert.pdf b/docs/static/skillmap/certificates/lab-3-cert.pdf
new file mode 100644
index 00000000000..efb5675e17e
Binary files /dev/null and b/docs/static/skillmap/certificates/lab-3-cert.pdf differ
diff --git a/docs/static/tutorials/bubbles/card.jpg b/docs/static/tutorials/bubbles/card.jpg
index b936035a9fa..8de04557879 100644
Binary files a/docs/static/tutorials/bubbles/card.jpg and b/docs/static/tutorials/bubbles/card.jpg differ