diff --git a/dist/assets/frontier-defense-poster.jpg b/dist/assets/frontier-defense-poster.jpg
new file mode 100644
index 0000000..a6da8ab
Binary files /dev/null and b/dist/assets/frontier-defense-poster.jpg differ
diff --git a/dist/assets/screenshot-dust2-northstar.png b/dist/assets/screenshot-dust2-northstar.png
new file mode 100644
index 0000000..ddb305c
Binary files /dev/null and b/dist/assets/screenshot-dust2-northstar.png differ
diff --git a/dist/assets/screenshot-mad-mod-download.png b/dist/assets/screenshot-mad-mod-download.png
new file mode 100644
index 0000000..fc74d81
Binary files /dev/null and b/dist/assets/screenshot-mad-mod-download.png differ
diff --git a/dist/assets/screenshot-runoff-northstar.png b/dist/assets/screenshot-runoff-northstar.png
new file mode 100644
index 0000000..242be68
Binary files /dev/null and b/dist/assets/screenshot-runoff-northstar.png differ
diff --git a/dist/data/roadmap.json b/dist/data/roadmap.json
new file mode 100644
index 0000000..739ba0d
--- /dev/null
+++ b/dist/data/roadmap.json
@@ -0,0 +1,50 @@
+[
+    {
+        "title": "Frontier Defense",
+        "description": "The beloved PvE mode in Northstar. Both in its vanilla version as well as extended with cut content and extra features",
+        "image": "/assets/frontier-defense-poster.jpg",
+        "image_alt_text": "Two Tians in front of the Frontier Defense harvester with another two Titans in the back."
+    },
+    {
+        "title": "Mod Auto Download",
+        "description": "Download custom mods such as gamemodes and maps when joining a server in a safe way.",
+        "image": "/assets/screenshot-mad-mod-download.png",
+        "image_alt_text": "A screenshot showing mod auto download in action."
+    },
+    {
+        "title": "Titanfall1 maps",
+        "description": "Bringing maps from Titanfall1 into Northstar",
+        "image": "/assets/screenshot-runoff-northstar.png",
+        "image_alt_text": "A screenshot of the Runoff map from Titanfall1 loaded into Titanfall2 using Northstar."
+    },
+    {
+        "title": "Custom maps",
+        "description": "Create tools for building custom maps so that the community can create their own maps",
+        "image": "/assets/screenshot-dust2-northstar.png",
+        "image_alt_text": "A screenshot of a development version of the dust2 map in Northstar."
+    },
+    {
+        "title": "Custom RUI",
+        "description": "Reverse Respawn's UI system to allow for custom crosshairs and UI elements",
+        "image": "/assets/NorthstarPromoPosterOG.jpg",
+        "image_alt_text": "The Northstar Promo poster showing a Northstar Titan using their FlightCore ability with the Northstar logo and text in front of it."
+    },
+    {
+        "title": "Modded Persistence",
+        "description": "Reverse and extend the persistence system to allow players to store custom weapons and Titans in their loadouts",
+        "image": "/assets/NorthstarPromoPosterOG.jpg",
+        "image_alt_text": "The Northstar Promo poster showing a Northstar Titan using their FlightCore ability with the Northstar logo and text in front of it."
+    },
+    {
+        "title": "Party System",
+        "description": "Implement the vanilla party system so you can group up with friends and join servers together",
+        "image": "/assets/NorthstarPromoPosterOG.jpg",
+        "image_alt_text": "The Northstar Promo poster showing a Northstar Titan using their FlightCore ability with the Northstar logo and text in front of it."
+    },
+    {
+        "title": "...whatever the future holds",
+        "description": "Do you have an idea for Northstar? Wanna help? Join our Discord and talk to us!",
+        "image": "/assets/NorthstarPromoPosterOG.jpg",
+        "image_alt_text": "The Northstar Promo poster showing a Northstar Titan using their FlightCore ability with the Northstar logo and text in front of it."
+    }
+]
\ No newline at end of file
diff --git a/dist/roadmap/index.html b/dist/roadmap/index.html
index ab4e41e..8458286 100644
--- a/dist/roadmap/index.html
+++ b/dist/roadmap/index.html
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="/style/header.css">
     <link rel="stylesheet" href="/style/footer.css">
     <link rel="stylesheet" href="/style/common.css">
+    <link rel="stylesheet" href="/style/roadmap.css">
     <link rel="shortcut icon" href="/assets/favicon-32.png" type="image/png">
 
     <!-- Primary Meta Tags -->
@@ -32,6 +33,7 @@
     <meta property="twitter:image" content="/assets/NorthstarPromoPosterOG.jpg">
 
     <link rel="preload" href="/assets/titanfall_new.ttf" as="font" type="font/ttf" crossorigin>
+    <link rel="preload" href="/data/roadmap.json" as="fetch" crossorigin>
 </head>
 <body>
     <div id="top">
@@ -53,16 +55,7 @@
     </div>
     <div class="pane">
         <div class="section">Roadmap</div>
-        <ul>
-            <li>Frontier Defense</li>
-            <li>Mod download on server join</li>
-            <li>Titanfall1 maps</li>
-            <li>Custom maps and corresponding tooling</li>
-            <li>Custom RUI</li>
-            <li>Modded persistence</li>
-            <li>Party system</li>
-            <li>...and whatever else the future holds</li>
-        </ul>
+        <div class="roadmap-container" id="roadmap"/>
     </div>
 
     <br style="font-size: 32px;">
@@ -72,6 +65,7 @@
         <a ondragstart="return false;" href="https://r2northstar.readthedocs.io/"><img src="/assets/icon_moddingdocs.svg" alt="Modding Documentation"/>Modding Docs</a>
         <a ondragstart="return false;" href="/discord"><img src="/assets/icon_discord.svg" alt="Discord Server"/>Discord</a>
     </div>
-    <script src="/script/index.js"></script>
+    <script src="/script/roadmap.js" onload="loadsRoadmap()"></script>
+    <script src="/script/index.js"></script>    
 </body>
 </html>
diff --git a/dist/script/roadmap.js b/dist/script/roadmap.js
new file mode 100644
index 0000000..1da6c68
--- /dev/null
+++ b/dist/script/roadmap.js
@@ -0,0 +1,30 @@
+var template = `
+<div class="roadmap-card">
+    <img src="IMAGE" alt="IMAGE_ALT_TEXT">
+    <div class="roadmap-card-content">
+        <div class="roadmap-card-title">TITLE</div>
+        <div class="roadmap-card-text">DESCRIPTION</div>
+    </div>
+</div>
+`
+
+function addRoadmapItem(group, icon, image_alt_text, title, description) {
+
+    var x = template.replace("IMAGE", icon)
+        .replace("IMAG_ALT_TEXT", image_alt_text)
+        .replace("TITLE", title)
+        .replace("DESCRIPTION", description);
+
+    document.getElementById(group).insertAdjacentHTML("beforeend", x);
+}
+
+function loadsRoadmap() {
+    fetch('/data/roadmap.json')
+        .then(response => response.json())
+        .then(data => {
+            data.forEach(item => {
+                addRoadmapItem("roadmap", item.image, item.image_alt_text, item.title, item.description);
+            });
+        })
+        .catch(error => console.error('Error fetching the JSON file:', error));
+}
diff --git a/dist/style/roadmap.css b/dist/style/roadmap.css
new file mode 100644
index 0000000..4fe2da4
--- /dev/null
+++ b/dist/style/roadmap.css
@@ -0,0 +1,34 @@
+.roadmap-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: center;
+}
+
+.roadmap-card {
+    background-color: white;
+    border-radius: 10px;
+    width: 300px;
+    overflow: hidden;
+    text-align: center;
+}
+
+.roadmap-card img {
+    width: 100%;
+    height: auto;
+}
+
+.roadmap-card-content {
+    padding: 20px;
+}
+
+.roadmap-card-title {
+    font-size: 1.5em;
+    margin: 10px 0;
+    color: #666;
+}
+
+.roadmap-card-text {
+    font-size: 1em;
+    color: #666;
+}
\ No newline at end of file